Pass Additional Profile Data via SSO - Vanilla Success
<main> <article class="userContent"> <p>In this article, you'll learn how to pass additional user profile data when connecting users via SSO. </p><p>All of our SSO methods integrate with our <strong>Profile Extender</strong> addon. This is applicable regardless of which SSO method you're using. Let's walk through how to set it up.</p><h2 data-id="enable-profile-extender-addon">Enable Profile Extender addon</h2><ol><li>Access the Dashboard.</li><li>Navigate to <strong>Settings > Addons > Addons</strong>.</li><li>Click the <strong>Profile Extender</strong> toggle to enable it.</li></ol><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/UISNCNK8IFJJ/enable-profile-extender-addon.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/UISNCNK8IFJJ/enable-profile-extender-addon.png" alt="enable_profile_extender_addon.png" height="488" width="1270" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="create-a-field">Create a field</h2><ol><li>Click the <strong>Settings icon</strong>.</li><li>Click <strong>Add Field</strong>.</li><li>Configure the field as appropriate. (More on these fields below.)</li><li>Click <strong>Save</strong>.</li></ol><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/36N9VROCX4DK/screen-shot-2020-05-05-at-4-21-49-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/36N9VROCX4DK/screen-shot-2020-05-05-at-4-21-49-pm.png" alt="Screen Shot 2020-05-05 at 4.21.49 PM.png" height="882" width="2138" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h4 data-id="type">Type</h4><p>Use the <strong>TextBox</strong> type, as it accepts Strings.</p><h4 data-id="required-for-all-users">Required for all users</h4><p><strong>Required for all users</strong> is only applied when users register using our native registration page, not over SSO. In other words, Vanilla does not validate SSO profile data for Profile Extender fields. If you pass nothing, we will not throw an error. <strong>Show on profiles</strong> means that this data will be displayed on the user's profile page.</p><h4 data-id="show-on-registration">Show on registration</h4><p>Make sure that you check <strong>Show on Registration</strong>.</p><ul><li>It will not show if you're passing all the required data to complete the SSO connection but it will receive the values you pass. </li><li>If, however, your connection flow is interrupted to prompt users to add a Username or Email address, these questions will show. </li><li>If you do not want users to be able to input data in these fields during SSO connection, you can hide them with CSS:</li></ul><pre class="code codeBlock" spellcheck="false" tabindex="0">.Dashboard.Entry .Connect li.form-group { display: none; } </pre><h3 data-id="pass-the-user-profile-data">Pass the User Profile data </h3><p>The <strong>key</strong> of the profile field being sent is simply the <strong>Label</strong> with any non-number and letters removed. The maximum characters is 50. </p><p><strong>🛑 IMPORTANT</strong>: The field is <strong>case-sensitive</strong>. So to capture user data for, example, <strong>Player Level</strong>, you would have to send it as <strong>PlayerLevel.</strong> If you created a field with a label <strong>Top "Rate" to-date!</strong>, you would have to send it as <strong>TopRatetodate.</strong> An example of an OAuth2 response that would pass values to these profile fields:</p><pre class="code codeBlock" spellcheck="false" tabindex="0">{ "Email": "ian@example.com", "Photo": "https://cdn.ouravatars.com/avatar/1fa90f330a58f5d.png", "Name": "Ian", "FullName": "Ian Devloper", "UniqueID": "fa0e81fa65e8", "PlayerLevel": "Novice", "TopRatetodate": "11", "email_verified": true, "Provider": "oauth2" } </pre><p>Remember, it's case-sensitive. If you send <code class="code codeInline" spellcheck="false" tabindex="0">"playerlevel":"Novice",</code> it will not throw an error but it will not pass the Player Level to the user's profile.</p><h2 data-id="troubleshooting">Troubleshooting</h2><p><strong>This is important</strong>: Once the field has been created, it has been saved with the transformed Label as its key (e.g., "PlayerLevel"). </p><ul><li>If you change the Label, the key remains the same. </li><li>If you edit the "Player Level" field in the Profile Extender addon settings and change its name to "Player Status," its key remains "PlayerLevel"; otherwise, data would be orphaned. If you want to change the key, you have to delete the field and create a new one.</li></ul><p>If you don't know what the key is (e.g., you have edited it several times, or the profile data is not being assigned to the user), one way to verify what the profile key is is to go to <code class="code codeInline" spellcheck="false" tabindex="0">/entry/register</code> and look at the source of the field you're looking for.</p><a href="https://us.v-cdn.net/6030677/uploads/055/Screen Shot 2020-05-05 at 5.30.57 PM.png" data-embedjson="{"url":"https:\/\/us.v-cdn.net\/6030677\/uploads\/055\/Screen Shot 2020-05-05 at 5.30.57 PM.png","name":"Screen Shot 2020-05-05 at 5.30.57 PM.png","type":"image\/png","size":244481,"width":1756,"height":972,"mediaID":788,"dateInserted":"2020-05-05T21:32:22+00:00","insertUserID":47,"foreignType":"embed","foreignID":47,"embedType":"image"}" class="embedLinkLoader" rel="nofollow noreferrer ugc"> https://us.v-cdn.net/6030677/uploads/055/Screen Shot 2020-05-05 at 5.30.57 PM.png <svg class="embedLinkLoader-failIcon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16"><title>There was an error displaying this embed.</title><circle cx="8" cy="8" r="8" style="fill: #f5af15"></circle><circle cx="8" cy="8" r="7.5" style="fill: none;stroke: #000;stroke-opacity: 0.122"></circle><path d="M11,10.4V8h2v2.4L12.8,13H11.3Zm0,4h2v2H11Z" transform="translate(-4 -4)" style="fill: #fff"></path></svg></a> <p>If you can't get to <code class="code codeInline" spellcheck="false" tabindex="0">/entry/register</code> , it's because you're using your SSO method as the default method of connecting to the site and we won't allow users to register through our page. </p><ul><li>Go into the settings page of the SSO addon you're using in the Dashboard and temporarily un-set it as the default method. After you have verified the field name, set it back as the default.</li></ul> </article> </main>