Enabling authenticated visitors in the integrated Web Widget

Return to top
Have more questions? Submit a request

69 Comments

  • Dylan Cunniffe

    Thanks Ramin,

     

    My understanding though is this is only a client-side fix? If a user simply closes their browser and gets logged out of the host app (server-side) there would be no way for us to ensure the customer is also logged out of the widget using the above method.

    Is my understanding correct?

    0
  • Ramin Shokrizadeh
    Zendesk Product Manager

    Hi Dylan,

    In the case of closing the tab, the widget will disconnect the visitor after 15 seconds based on the timeout value and they would need to be authenticated again via the client.

    -Ramin

     

    0
  • Dylan Cunniffe

    Thanks again Ramin,

     

    One more question before I take this to my devs, could you just confirm what is meant by the below comment in the article?

    0
  • Ramin Shokrizadeh
    Zendesk Product Manager

    Hi Dylan,

    That was out of date information in the docs, it has been corrected now. You can use the code sample I provided earlier to logout in the integrated chat experience.

    -Ramin

     

    1
  • Ivan De Jesus

    Hi Ramin,

    Already follow the process on authenticating users, I used jwt.io to generate token and pass it on the callback. Unfotunately web widget still can't recognize user details and add them as visitors. Please help, thanks

     

     

    0
  • Ramin Shokrizadeh
    Zendesk Product Manager

    Hi Ivan,

    Please email chat@zendesk.com to get assistance with your authentication question.

    Thanks,
    Ramin

     

    0
  • Ivan De Jesus

    Hi Ramin,

    Already done with the implementation of on authenticating users. I noticed that to be able to authenticate the user upon login page needs to be reloaded. But we are working on SPA. Can you help?

     

    Thanks,

    Ivan

    1
  • Ramin Shokrizadeh
    Zendesk Product Manager

    Hi Ivan,

    If you are offering chat on the login page and they authenticate into your app, you will want to have the widget load after the authentication. There is no transition phase for a visitor to move from non-authenticated to authenticated in the same session.

    If you load the widget and authenticate in the single page app, it should work assuming you do not destroy the widget on page changes. Optional for single page apps, use the following API to see the visitor path changes in the app: https://api.zopim.com/files/meshim/widget/controllers/LiveChatAPI-js.html#sendVisitorPath

    This can help your agents know where in the app the visitor/customer is currently. 

    Thanks,

    Ramin

    0
  • Vikas Shivananjappa

    Hi Team,

                We are using angular 7 app integrated with zendesk chat as web widget.  The authentication piece of code is getting called on application load(unfortunately we do not have any user details) but not after that.

     

    CODE SAMPLE:

    this.window['zESettings'] = {
    webWidget: {
    authenticate: {
    chat: {
    jwtFn: (callback) => {
    this.apiService.ssoPost(this.zendeskAPIURL, null, null).subscribe((response) => {
    console.log('Response from Zendesk Chat API - Identify', response.zendeskToken);
    callback(response.zendeskToken);
    });
    },
    },
    },
    },
    };

    Appreciate any help on this one?
    0
  • Vikas Shivananjappa

    So with further more investigation, i believe the  above code snippet runs before the chat widget is loaded... However it did not after.

     

    In our case, since the widget is shown on app load(before login), we have no means to authenticate the user. We want to authenticate the user when he logs in and update the chat widget settings accordingly.

     

    Appreciate any help on this regard.

    0
  • Ramin Shokrizadeh
    Zendesk Product Manager

    Hi Vikas,

    Currently, there is no way to transition a non-authenticated visitor to an authenticated visitor. You will need to authenticate the visitor after the login page.

    -Ramin

     

    0
  • Vikas Shivananjappa

    Hi Ramin,

                    Thank you for the response. Does that mean we need to load the chat widget only after the user gets autheticated(after login). If so, then how?

     

     

     

    0
  • Ramin Shokrizadeh
    Zendesk Product Manager

    Hi Vikas,

    In terms of code, the authentication call needs to happen after the widget snippet. So the flow would look like this:

    1. Login page (no widget)
    2. User authenticates on your end
    3. Gets directed to homepage, widget loads and calls the authenticate call with the set user information

    -Ramin

    0
  • vshivananjappa

    Hi Ramin,

                    Ours is a single page app. The zendesk chat web widget is embedded in our index.html file which gets loaded on application load(only one time). 

     

    Hence in the above mentioned scenario,

    How do we suppress the chat widget on login screen

    How do we enable the chat widget once user logs in with authentication details

     

     

    NOTE: I tried to use suppress attribute of zESettings but it did not work.

    0
  • Ramin Shokrizadeh
    Zendesk Product Manager

    Please create a ticket by emailing chat@zendesk.com and we can troubleshoot your issue further from there.

    0
  • Jorge Lage Saguier

    Can we authenticate visitors if we are using the Chat SDK?

    0
  • Barry Carroll

    Hi Jorge,

    You cannot do that currently. We're working on Chat SDK V2, and this is one of the use-cases we'll address there.

    0
  • Alex

    Is the current behavior of external_id in relation to end-user creation described anywhere?

    From some testing, it seems like things currently work like this:

    No account with same email

    • end-user account created
    • email = email
    • name = name
    • external_id not set

    Account with same email

    • end-user account matched with chat
    • name unchanged (chat name can differ from end-user name)

    I haven't tested what happens when an account with an email has an external_id set already, and a authenticated chat visitor matches with that email but uses a different external_id.

    What is the current behavior supposed to be?

    0
  • Ramin Shokrizadeh
    Zendesk Product Manager

    Hi Alex,

    The way authenticated visitors work in Chat is specific to the unique external ID and not related to the email address. Multiple external IDs can have the same name/email address and they will be viewed as different people in the Chat product.

    The Chat external ID does not get pushed to the Support End User, which has a different external ID field.

    -Ramin

    0
  • Mario Kunz

    Hey

    We implemented the authentication like described. But the call to the authenticate URL fails with a 403 response with the body 'Secret invalid'.

    Do you have any hints on what is going wrong? We verified the generated token with the secret and it was correct.

    Thanks for the help,

    Mario

    0
  • Brett Bowser
    Zendesk Community Team

    Hey Mario,

    I'm going to create a ticket on your behalf so our Customer Advocacy team can look into this for you.

    You'll receive an email shortly stating your ticket has been created.

    Cheers!

    0
  • Jimmi C

    I got it working by doing this. Had it execute right after loading the chat script and login was completed.

    //Make sure that this code is private behind these comments

    let jwt = require('jsonwebtoken');
    let today = new Date().getTime();
    let seconds = today/1000;
    let payload = {
    'name': name, //display name of your user
    'email': email, //Their email address
    'iat': parseInt(seconds), //Current time in seconds. MAKE SURE IT IS AN INT
    'external_id': external_id, // Unique id that you created, you can find the external id on person record in ZD. String
    'exp': parseInt(seconds + (5*60)) //Current time in seconds + 5 mins. MAKE SURE IT IS AN INT AND NOT GREATER THAN 7 MINS IN THE FUTURE.
    };

    var signOptions = {
    header : { "alg": 'HS256',"cty":"JWT"},
    algorithm: "HS256"
    };

    var token = jwt.sign(payload, '[secret]', signOptions);

    //Make sure that this code is private behind these comments


    window.zESettings = {
    webWidget: {
    authenticate: {
    chat: {
    jwtFn: (callback) => {
    callback(token);
    }
    }
    }
    }
    };
    0
  • Ali I. Avci

    Is there any way to disable the chat widget if Zendesk doesn't accept the JWT information? i.e. If an error happens after `callback(jwt);` is called in `jwtFn`. The aim is the ensure that only authenticated users are able to chat

    0
  • Ramin Shokrizadeh
    Zendesk Product Manager

    Ali I. Avci Currently, there are no callback functions or features backed into the widget to not load if authentication fails. The current behaviour today is it attempts to load the visitor as non-authenticated if authentication fails. 

    0
  • phil

    I was struggling to get this working for ages, with the error "failed to validate claims" coming back in the response from the Zendesk API.

    The problem was that we were sending external_id as an integer value. It needs to be added to the JWT payload as a string.

    This is in contrast to the way that the single sign-on system for Zendesk Support and Guide works, where external_id can be an integer.

    0
  • Toni Suokas

    Hi,

    It would seem that using Ghostery without adding the site as trusted blocks the chat authentication with the following error. Is there any way to workaround this or possibility to catch an error from the callback so we could notify the user about the possible causes:

    ```

    Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://id.zopim.com/authenticated/web/jwt. (Reason: CORS request did not succeed).

     
    Zendesk Chat Web SDK: Error: init: Failed to verify token: network/security error vendors~web_widget.ce87684a0dcf2a14c343.chunk.js:114:132415
     
    ```
     
    0
  • pouria bagheri

    Hi following this article. I'm integrating zendesk chat with help widget. however the authentication is unsuccessful. 

    here is my JWT
     

    Response : {
                                "success": false,
                                "error": "failed to validate claims"
                        }
    I'm getting my shared secret from  {subdomain}.zendesk.com/agent/admin/widget
    and the widget script from  https://static.zdassets.com/ekr/snippet.js?key={KEY}"

    is there anything I'm missing ?
    0
  • Ramin Shokrizadeh
    Zendesk Product Manager

    pouria bagheri looks like you are using the wrong secret, you are using the one for help center. To get the one for Chat, follow the instructions here: https://support.zendesk.com/hc/en-us/articles/360022185594-Enabling-authenticated-visitors-in-the-integrated-Web-Widget#topic_s5k_dvq_4fb

     

     

    0
  • pouria bagheri

    Ramin Shokrizadeh Thank you for your prompt response.

    this link leads to https://support.zendesk.com/hc/en-us/articles/360022367453 which is about Restricting the Chat widget by country or domain.  doesn't seem to be the right link for Widget security settings tab. 

    if it is not too much trouble could you provide the link for the relevant screen? 

    0
  • Ramin Shokrizadeh
    Zendesk Product Manager

    The link to the settings section depends on what account type you are. If you go to Setting ---- Widget ---- Widget Security you will see the option. The link in the doc is to explain the security settings, not direct link to the settings page. 

    0

Please sign in to leave a comment.

Powered by Zendesk