The Coca-Cola Company Consumer Digital Marketing

This demonstration page illustrate usage of the provided lightweight JS integration library.
This JS library is provided to similify integration with the Coca-Cola shared CIAM solution (AKA the shared Account Site).
The JS library is a simplified wrapper over MSAL.

Request Azure B2C clientID

In order to start your integration, is necessary request a new Azure B2C clientID, please follow the steps described in this link.

Import the JS library

The file contains a name + version number.e.g: https://{env}-myaccount.latam.coca-cola.com/sdk/v1.0.0/tcccLogin.js
You need to import the JS file and initialize the library. clientID is the only required parameter. All other parameters are optional.
Refer to the Parameters tab to see all possible parameters that the library accepts.

Example of initializing the library with two parameters (clientID, tokenExchangeUrl)

  • <script src="https://alpha-myaccount.latam.coca-cola.com/sdk/v1.0.0/tcccLogin.js" async defer></script>
<script>
    async () {
        const sdk = await new tcccLogin.LoginSdk({
        clientID: '648b793b-9fb8-******', // Please replace the value with actual clientId for your app.
        tokenExchangeUrl: '/token_exchange.html'
    })
    await sdk.isSDKReady()
    window.sdk = sdk
}
</script>

Setting up HTML elements for signin signup edit profile signout

Observers classes names with their functionalities:
Add one of the following classes to the button/anchor in order to add event click with determined functionality depending the class used.
  • Functionality
    Description
    ClassName
  • SignIn
    Trigger sign in Flow
    tcccLogin_capture_signin_link
  • Edit Profile
    Go to the My Account in Edit profile tab
    tcccLogin_capture_editprofile_link
  • Sign Out
    Logs out user from account site and experience.
    tcccLogin_capture_signout_link
  • Forced SignIn
    Force users to provide credentials even if user has logged in.
    tcccLogin_capture_signin_red_link

Parameters

  • Parameter Name
    Description
    Default Value
    Example
  • clientID
    This is a mandatory field required for any app. Value should be the azure b2c application ID created for the experience. There is no default for this parameter in sdk. If you do not have a clientID, please request following the steps described here.
    ''
    '648b793b-9fb8-4b97-a0a7-e370491a5191'
  • stringRedirectUrl
    If the application only supports URL ending with .html set this value to '.html'
    ''
    '.html'
  • accountPageLink
    Link for the Account site set up for the region. Agencies should not need to use this.
    ''https://{env}myaccount.latam.coca-cola.com''
    'https://alpha-myaccount.latam.coca-cola.com'
  • accountPageStringCompare
    This string is used to compare if the user is on account page or any other experience
    'myaccount.latam.coca-cola.com'
    'alpha-myaccount.latam.coca-cola.com'
  • b2cPath
    This is the Azure frontdoor URL for the b2c tenant. This is used to customize the b2c url user sees. Should be provided by coke team and remains same for a region.
    'https://{env}login.{region}.coca-cola.com/{b2cTenantId}'
    'https://alpha-login.latam.coca-cola.com/8a7698f0-bbc7-4d89-a0ea-a396814b050d'
  • loginPolicy
    Azure B2C policy used for signin signup
    B2C_1A_SIGNUP_SIGNIN_GENERIC
    B2C_1A_SIGNUP_SIGNIN_GENERIC
  • scope
    Scope defined in Azure B2C under authorizer-app. The client id should have been provisioned with this scope in azure b2c. Without specifying the scope MSAL wont generate an accessToken. This is mandatory to receive an accessToken.
    'https://latambeta.onmicrosoft.com/authorizer-service/read'
    'https://latambeta.onmicrosoft.com/authorizer-service/read'
  • authority
    You can configure a specific authority, defaults to " " or "https://login.microsoftonline.com/common"
    ''
    'https://${env}-login.latam.coca-cola.com/${tenantId}/${b2cPolicy}'
  • ssoUrlQuerystring
    This query string if present in the URL will trigger the sdk to establish sso session. If user is already logged in to b2c user will be authenticated else will be presented with login page. To be used when redirecting from one site to another.
    'sso'
    sso
  • extraQueryParameters
    This parameter presents any custom parameters that your site need to pass to sdk. This is a JSON object that can have the attributes that you want. This object will be serialized and join with other params on query string
    ''
    {"country":"PE", "campaign":"meals"}
  • currentPageCookieExpires
    Sets the time when the current page cookie should expire. On launching any page with this SDK we store the current URL under this cookie. This cookie can then be used to redirect user to the page where user initially was.
    '24 * 60 * 60000 * 2'
    24 * 60 * 60000 * 2
  • tokenExchangeUrl
    This is the page where b2c will redirect Users after completion of a user journey like signin/signup. This page should exist in the application and should just have the sdk initialization code.
    '/token_exchange'
    '/token_exchange'
  • editProfilePage
    url path for Edit Profile page for the account site. This is supposed to be configured only if for some reason account site is changed to not call the page as 'edit-profile
    '/edit-profile.html'
    '/edit-profile.html'
  • signOutPage
    url path for the sign-out page on account site. This page is informative page informing users that user will be logged out of all the sites which are using the same coca cola azure b2c tenant. Shouldn't be initialized and should be left to default to account page.
    '/sign-out.html'
    '/sign-out.html'
  • logoutUrl
    This page should be set up in each application. Page should just have the sdk initialization code. B2C will call this endpoint automatically when user logs out. SDK code has the logic to clear user's local storage and cookies when this page is launched.
    Only for Edit-Profile page. Add this parameter on Edit-Profile link
    '/log-out'
    '/log-out'
  • postLogoutRedirectUri
    The redirect URI where the window navigates after a successful logout.
    ''
    '/custom-log-out'
  • encodeParams
    The encodedParams shows which query string the SDK should not decode for the redirect url.
    Since some query comes as base64, the get params from a url.searchParams can not be used, due wrong treatment. With '+' characters, decoding to a wrong base64.
    ''
    '["param1", "param2"]'
  • userData
    An array with the data you want to retrieve from the JWT token, and will be available when call getAccountAuthenticationInfo() method
    ''
    '["given_name"]'
Public Methods
The SDK have some methods that we can use to do actions or get some returns, below will be described all public methods that the SDK makes available and is read to use.

getAuthenticationUrl(forceLogin, originClientId)

This method is used to redirect the user to the login page.
The forceRedZone parameter is used to force the user to login. Should be marked true.
The continueAsGuest parameter means this option will be available to the user on the login page.

Note: This method is asynchronous, so you may need to use an 'await' or 'then' to use it properly.

await window.sdk.getAuthenticationUrl(forceLogin, originClientId)

getEditProfileUrl()

This method will get the edit profile url according to the environment.

window.sdk.getEditProfileUrl()

getSignOutUrl()

This method is used to call signOut functionality of SDK.

window.sdk.getSignOutUrl()

saveScrollPosition()

This method is used to save the the current scroll position on local storage.

window.sdk.saveScrollPosition()

overrideCurrentPageOnCookie(page)

This method is used to override the current page cookie with the value that user should be redirected when they finish the login process. Eg. to participate of a campaign after finish the video play the user is redirected to login and after the login the user should return to the success page of campaign.
*This method must be invoked right after the SDK be initialized, so it will override the cookie value.

<script>
    async () {
        const sdk = await new tcccLogin.LoginSdk({ clientID: '648b793b-9fb8-******' })

        await sdk.isSDKReady()
        window.sdk = sdk

        window.sdk.overrideCurrentPageOnCookie('https://www.example.com/test-success.html')
    }
</script>

isAuthenticated()

Is used to discover if user has a session, this method return TRUE or FALSE.

window.sdk.isAuthenticated()

isSDKReady()

This method is used to return if SDK is ready to be used, this return a Promise.

window.sdk.isSDKReady().then(...)

// or

await window.sdk.isSDKReady()

getAccountAuthenticationInfo(originFrom)

This method is used to retrieve information about the account authentication. Information such as if the account has a password, if it's a social account, which social issuer was used to log in and a list of social users issuers that the user has linked in their account.

await window.sdk.getAccountAuthenticationInfo(window.sdk.getOrigin())

Response example:
{
    "hasPassword": false,
    "authenticationSource": "localAccountAuthentication",
    "email": "user-email@test.com",
    "currentUserIssuer": "https://gamma-login.latam.coca-cola.com/2f09d0bb-c222-4396-bc8f-ff45a268d36b/v2.0/",
    "lastLinkedOrUnlinkedAccount": null,
    "kocid": "965d22096f32639e518787858883ca9138cb3cf3b9af528563f7f3a4a7c323f4",
    "country": "PE",
    "given_name": "Test",
    "socialUserIssuers": [
        {
            "issuer": "facebook.com",
            "issuerUserId": "3630005700444447"
        },
        {
            "issuer": "google.com",
            "issuerUserId": "104040041357104144444"
        }
    ]
}

getAuthHeader()

This method is used to get the authentication header. It will return a object with the JWT accessToken or null if the user is not authenticated.

await window.sdk.getAuthHeader()

Response example:
{
    "accessToken": "..."
}

doRedirect(params)

This method is used to call B2C screens, to use it is needed pass parameters like (authority, scopes, extraQueryParameters, state) as configuration to correct call B2C screens. Below there is an example that call screen on B2C screen.

The parameter extraQueryParameters can be used to pass other params (isWebBrowser, hint and others as needed) as this example.

${env} = alpha|beta|gamma
${b2cTenantId} = B2C Tenant ID
${b2cPolicyName} = B2C_1A_SIGNUP_SIGNIN_GENERIC|B2C_1A_CHANGEPASSWORD_GENERIC|B2C_1A_CHANGEPHONE_GENERIC

const params = {
    "authority": "https://${env}-login.latam.coca-cola.com/${b2cTenantId}/${b2cPolicyName}",
    "extraQueryParameters": {
        "isWebBrowser": true
        "country": "MX",
        "campaign": "CCETH"
    }
}
await window.sdk.doRedirect(params)

doLogOut()

This method is used to do the user logout, removing all TCCC cookies and calling MSAL logout method.

await window.sdk.doLogout()

createAuthRequest(request)

The method createAuthRequest will handle some tasks like add the JTW Token to the Header.
Unauthorized flows like 401 or expired token flows and other tasks that are necessary to make a API Wrapper call.
The method receives an object that contains properties that will be used on the api call.

Parameters:
  • Parameter Name
    Type
    Description
  • method
    string
    Request method - e.g: POST
  • domain
    string
    API domain - e.g: https://frontend.${env}.latam.gcds.coke.com/v2
  • endpoint
    string
    Api endpoint. e.g: /members
  • headers
    object
    The request headers
  • body
    object
    The request body - SDK do a JSON.stringify don't do it on client.
  • disableCallbackError
    function
    It will be used to decide if the callback that you can pass on SDK instance constructor will be called - True or False

Example:
const response = await window.sdk.createAuthRequest({
    method: 'GET',
    domain: 'https://frontend.${env}.latam.gcds.coke.com/v2',
    endPoint: '/members'
})

// or

window.sdk.createAuthRequest({
    method: 'GET',
    domain: 'https://frontend.${env}.latam.gcds.coke.com/v2',
    endPoint: '/members'
})
.then((response) => console.log(response))
.catch((error) => console.log(error))

getOrigin()

To get the name of the policy that was used to issue the token.

await window.sdk.getOrigin()

loadAuthPage(originClientId)

This method is used to check if the user is logged, if not try to force the SSO, if it fails redirects the user to the sign in page.
*The parameter originClientId is optional.

await window.sdk.loadAuthPage()

readCookie()

This method is used to read a cookie value from the browser.

window.sdk.readCookie('cds-current-user-token')

OIDC

The Coca-Cola Consumer CIAM solution, using Azure AD B2C, supports integration via OpenID Connect. If your application or framework provides an OIDC client, using OIDC would be a preferred method of integration (instead of using the SDK AKA Javascript Library). OIDC integration is exclusive of the JS integration library.

Reference Material

Endpoints

Various OIDC provider endpoints are required for OIDC integration. The correct endpoints can be supplied by the CIAM product team.

The below examples use the LATAM Gamma environment.

Additional Considerations

Because the Coca-Cola supplied Javascript library is not utilized in OIDC integration, there are a few items that must be considered and implemented by the integrating experience.

Edit profile link

Using the OIDC integration you are the responsible to generate the Edit profile link. Down below are described the required and available options to be used as query parameters.

  • Parameter Name
    Description
    Default Value
    Example
  • origin_client_id
    This is a mandatory field required for any integration. The value should be the azure b2c application ID (clientID) created for the experience. This value is used to setup correctly the Edit profile page, based on the country your experience belongs, such as States/Cities list, Footer Links, etc.
    ''
    https://myaccount.latam.coca-cola.com/edit-profile.html? origin_client_id=ec810b76-d5ca-4bc3-a52c-034fc49bd15f
  • redirect_uri
    URL to be redirected to after a profile update or back button clicked.
    ''
    https://myaccount.latam.coca-cola.com/edit-profile.html? redirect_uri=https://demo.b2c.latam.ccnag.com/index.html&origin_client_id=ec810b76-d5ca-4bc3-a52c-034fc49bd15f
  • redirect_type
    Type of this redirect, can be two types: "button" or "auto". For "button" type, the page will display on the top, right side of the screen, a button that redirect user to the URL that was informed on "redirect_uri". For "auto" type, the user will be redirect automatically to the URL from "redirect_uri" after user update successfully his profile.
    Required: "redirect_uri"
    Only for Edit-Profile page. Add this parameter on Edit-Profile link
    "button" or "auto"
    https://myaccount.latam.coca-cola.com/edit-profile.html?redirect_uri= https://demo.b2c.latam.ccnag.com/index.html&origin_client_id=ec810b76-d5ca-4bc3-a52c-034fc49bd15f& redirect_type=auto
  • redirect_time
    Time to Account Site redirect the user for the URL on "redirect_uri" param in milliseconds. This is not a required parameter and the default value for this is 5000 milliseconds (5 seconds)
    Required "redirect_type" as "auto"
    Only for Edit-Profile page. Add this parameter on Edit-Profile link
    5000 milliseconds (5 seconds)
    https://myaccount.latam.coca-cola.com/edit-profile.html?redirect_uri= https://demo.b2c.latam.ccnag.com/index.html&origin_client_id=ec810b76-d5ca-4bc3-a52c-034fc49bd15f& redirect_type=auto&redirect_time=10000

Changelog

  • Version
    Release Date
    Description
  • v1.0.4
    16 May 2022
    • Created a Settings object to control and recovery all important params.
    • LOE-1458: Redirect flow stop work after a password change.
  • v1.0.3
    3 May 2022
    • LOE-1400: Add new extraQueryParameters on SDK
    • Update API Request service to handle with new responses types.
  • v1.0.2
    14 Apr 2022
    • Removing isAuthenticate flag on doLogOut
    • Adding await on doLogOut calls
    • Adding origin_client_id on SSO calls
  • v1.0.1
    8 Mar 2022
    • Refactoring loadAuthPage
    • Refactoring getAccountAuthenticationInfo
    • Fixing minor issues
  • v1.0.0
    27 Jan 2022
    • Initial version of Coke's LATAM Account Login SDK