Adaptive Cards can be used to build and customize a variety of content. One of which is displaying Login in a Card. Read more about Adaptive Cards here.Adaptive Cards
In this document, we will give you a sample code for a login card.
Also, see Login within a chatbubble.
Adaptive Card login
Use this sample code in the Adaptive Card to get the Login card in the Chatbot.
{ "type": "AdaptiveCard", "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.3", "body": [ { "type": "RichTextBlock", "inlines": [ { "type": "TextRun", "text": "Login" } ], "horizontalAlignment": "Center", "height": "stretch", "spacing": "ExtraLarge" }, { "type": "Image", "url": "https://www.pngitem.com/pimgs/m/512-5125598_computer-icons-scalable-vector-graphics-user-profile-avatar.png", "width": "100px", "height": "100px", "horizontalAlignment": "Center", "backgroundColor": "b" }, { "type": "TextBlock", "text": "Authentication failed", "wrap": true, "id": "auth-failed", "isVisible": false, "horizontalAlignment": "Center", "spacing": "Large", "color": "Attention" }, { "type": "TextBlock", "text": "Username:", "wrap": true, "fontType": "Monospace", "size": "Large", "weight": "Bolder", "color": "Attention" }, { "type": "Input.Text", "placeholder": "Username", "id": "username" }, { "type": "TextBlock", "text": "Password:", "wrap": true, "fontType": "Monospace", "size": "Large", "weight": "Bolder", "color": "Attention" }, { "type": "Input.Text", "placeholder": "Password", "id": "password" } ], "actions": [ { "type": "Action.Submit", "title": "Login", "data": { "message": "You have logged in Successfully", "eventName": "A-login" } } ] }
In Experience Designer, design a flow as shown below.
Choose the Login Adaptive card in the Adaptive card node.
Add the below code in the function node named Login Actions.
var _ = global.get('lodash'); var index = _.findIndex(msg.payload.orbita.directive, { type: 'adaptivecard'}); var adaptiveCard = _.find(msg.payload.orbita.directive, { type: 'adaptivecard'}); adaptiveCard.template.actions = [ { "type": "Action.Submit", "title": "Login", "style": "positive", "data": { "serviceCall": { "url": "<Login directive tab URL goes here>", "type": 'POST', "orbitaAction": 'login', "loginSuccessUtterence": "success" } } } ] msg.payload.orbita.directive[index] = adaptiveCard; return msg;
Create an intent with “success” as one of its utterances. This intent will get triggered when the login is successful.