How to Set Up SNS Account Login (SSO)

How to Set Up SNS Account Login (SSO)

Info
Purpose
This section explains the flow for registering as a member using a guest’s SNS account.
⏱ Estimated time: ~10 min
Idea
There are two integration methods.
  1. Enable Social Media SSO-Link from the tripla membership login screen to the SSO login screen to log in or register.
  2. Enable OpenID Connect SSO-Log in or register directly on the SSO login screen without using the tripla membership login screen.
*When using social login, it is recommended to register and manage the social media application in the admin panel.
Warning
Note:
When switching settings, clear all existing configurations in advance.

If switching from “Enable Social Media SSO” to “Enable OpenID Connect SSO,”
all items listed under “Enable Social Media SSO” must be cleared beforehand.

1. SNS Account Supported

Currently, the SNS accounts supported by tripla are as follows:
  1. Facebook
  2. LINE 
  3. Services that use the OpenID protocol
WarningFor LINE integration, please contact the support team.

2. How to Log In Using SNS

The steps for a user to log in with SNS are as follows:
  1. Select the applicable SNS on the login screen.
  2. When the authorization screen is displayed, select Approve.
WarningSSO settings in the tripla admin panel are configured at the brand level.
  • If property-level SSO is ON:

    Existing property-level SSO settings can continue to be used.
    Brand-level SSO settings will be displayed, but property-level settings take priority.
    If property-level SSO is turned OFF and brand-level SSO is turned ON, the brand-level SSO will be applied.

  • If property-level SSO is OFF:

    Property-level SSO settings are hidden, and brand-level SSO is used.

If property-level SSO is currently in use, please migrate to the brand-level SSO setting.

3. Enable Social Media SSO

Link from the tripla membership login screen to the SSO login screen to log in or register.
  1. Setting page: Brand Management Screen
  2. Action: 'Admin Setting' → 'Single sign-ON Settings'

3.1 Setup Procedure

Step 1
Click [Enable Social Media SSO].
Step 2
Click [+ Add Provider] and select [Custom] to add a provider.
Step 3
Enter the SSO provider information and save.

3.2 Authentication Settings Detail

TitleThis title will be displayed as the login option on the customer-facing screen.
Discovery Document URLEnter the IdP URL used by the property.
Response TypeChoose from code・id_token.
Client IDThe Client ID created in Google.
Secret TokenThe Client Secret created in Google.
Upload Logo
Upload the logo to be shown on the left side of the login button on the customer screen.
*Even if you set the logo in the OAuth consent screen, it won’t reflect — please upload it here.
Button Color (Background)
Choose the background color of the login button displayed on the customer screen.
Button Color (Text)
Choose the text color of the login button displayed on the customer screen.

4. Enable OpenID Connect SSO

Log in or register directly on the SSO login screen without using the tripla membership login screen.
  1. Setting page: Brand Management Screen
  2. Action: 'Admin Setting' → 'Single sign-ON Settings'
Step 1
Click [Enable OpenID Connect SSO].

Step 2
Enter the "Authentication Settings". (*Required)

Step 3
Enter the "Membership Mapping".

Step 4
Sign-In Data Sync:
If the email address or name obtained at login differs from the current member information,
select this option and click [Save] to update the information.

5. Facebook App Setup (Using Subdomain)

5.1 Account Creation

Step 1・Create a Facebook Login application in the Facebook Developer Portal.
・Click [Create an App] either in the top-right corner or center of the screen.

Step 2 ・Choose an app type.

Step 3
・Enter the "Application name" and "Application contact email" field.
・Then click [Create an App].

Step 4・After completing the App creation, following screen will be displayed.
・Go to 'Application Setting'→ 'Base'.

Step 5
Configure the setting shown in the picture below:

▼Details:
・Application Domain: When a subdomain is used, add the subdomain’s domain URL.
If the property does not have subdomain, use Hotel's official URL instead. 
(Example: for the subdomain URL is "https://www.tripla-subdomain.jp", add only "tripla-subdomain.jp".)
・URL Privacy Policy : Enter URL for privacy policy.
・URL Terms of Service: Enter the URL for term of services. 
・App Icon: Set icon that will be displayed when the user attempts to log in.
・Verification: Complete Facebook Business Verification. 
*For detailed setup instructions, please contact Facebook support.
Step 6
・At the bottom of the screen, click [Save Changes] to register your settings.
・Once the setup is complete, switch the "Application mode" from [Development] to [Live].
Step 7
・Go to 'Dashboard' → "Add a Product to Your App",
・Select [Get Ready] under "FacebookLogin for Business".
Step 8■ Enable the following settings:
・"Embedded Browser OAuth Login" → set to Yes
・"Login with the JavaScript SDK" → set to Yes

■ For “Valid OAuth Redirect URIs”,
・Enter the subdomain URL when a subdomain is used.
・If no subdomain is used, enter the hotel’s website URL.

■ For “Allowed Domains for the JavaScript SDK”,
・Enter the hotel’s URL and the Booking Widget URL. (either the subdomain or the tripla booking widget URL).

After completing the inputs, select [Save Changes] at the bottom of the screen.

5.2 Where to Set on Tripla Book

  1. Setting page: Brand Management Screen
  2. Action: 'Admin Setting' → 'Single sign-ON Settings'
Step 1
Enable the SSO, click [+ Add SSO] and choose [Facebook].

Step 2
・Enter the Facebook App ID and Facebook Secret Key.
・Facebook App ID and Facebook Secret Key can be found at Facebook Developer Console: "Application Settings" → "Base".


Step 3After entering the information,
click [Save] on the bottom of the screen to complete the setup.
Info
For properties where property-level SSO is already enabled, SSO settings can still be reviewed in:
  1. Setting Page: Property Management Screen
  2. Action: 'Settings' → 'Widget Settings' → "Login widget"
*However, migration to the brand-level SSO settings is recommended.
WarningThe booking engine launch URL varies depending on the subdomain configuration.
  • When using a subdomain: Use only the subdomain URL.
  • When not using a subdomain: Use the URL without http://.

When using the app in the production environment, switch it to Production mode.

6. Google SNS Integration

6.1 Setting on Google

Step 1
・Log in to the Google Cloud Console and create a project.
・Access the Google Cloud Console from the following URL:
・After logging in, a screen like the one shown below is displayed.
Step 2・Click [Select a Project] → [New Project].
Step 3・Set the Project Name and Location, then click [Create].

Step 1Go to 'APIs & Services' → 'OAuth consent screen'.
Step 2Enter the App Information.
Step 3
Set the Audience Type to [External] and click [Next].

Step 4
Go to 'Data Access', click [Add or remove scopes].
From the filter list, select the following three checkboxes:
・See your primary Google Account email address
・See your personal info, including any personal info you've made publicly available
・Associate you with your personal info on Google

Step 5
Go to 'Audience' to configure test users.
If testing the app behavior, add users as test users.

6.3 Credential

Step 1
From the left menu, select [Credentials].

Step 2
Select [＋ Create Credentials] → [OAuth Client ID].

Step 3
For Application Type, select [Web Application].
Enter the information on the following page.


Step 4
Once created, the credentials are displayed in the OAuth 2.0 Client IDs list.
Select the item to view the details.


Step 5
Check the Client ID and Client Secret, then register them in the tripla admin screen.

6.4 Where to Set on Tripla Book

  1. Setting page: Brand Management Screen
  2. Action: 'Admin Setting' → 'Single Sign-On Settings'
Step 1
Click [Enable Social Media SSO].
Step 2Click [+ Add Provider] and select [Custom] to add a provider.
Step 3
Enter the SSO provider information and save.
▼Authentication Settings
TitleThis title will be displayed as the login option on the customer-facing screen.
Discovery Document URLEnter the IdP URL used by the property.
Response TypeChoose from code・id_token.
Client IDThe Client ID created in Google.
Secret TokenThe Client Secret created in Google.
Upload Logo
Upload the logo to be shown on the left side of the login button on the customer screen.
*Even if you set the logo in the OAuth consent screen, it won’t reflect — please upload it here.
Button Color (Background)Choose the background color of the login button displayed on the customer screen.
Button Color (Text)Choose the text color of the login button displayed on the customer screen.

    • Related Articles

    • Tripla Admin Account Management

      Purpose: This section is to explain how to configure login account's name, email address, and manage password from the tripla administration screen. 1. Where to Set After logging in, click [UPDATE PROFILE] on the tripla administration screen. ...

    • LINE Integration

      Purpose: This section explains how to integrate Chatbot with LINE, Creating Rich Menu, and integrating LINE with tripla connect. ⏱ Estimated time: ~30 mins A LINE Login channel is required for LINE SSO settings, and a Messaging API channel is ...

    • SNS broadcast

      Connectで設定したセグメントへ向けて、SNS（LINE、facebook、Whatsapp）でのマーケティングアクションが可能です。 ⏱所要時間：約30分 tripla Botのご契約がない場合はSNSブロードキャスト機能はご利用いただけません。 設定する場所 Connect管理画面ーSNSブロードキャスト 作成方法 SNSブロードキャスト画面の「作成」をクリックし、作成画面に遷移します。 管理画面 用途 SNSブロードキャストの管理用タイトルです。お客様には表示されません。 ...

    • Organization Settings

      Purpose This section explains how to create organizations for corporate customers. For detailed information about the organization membership program, please refer this manual. ⏱ Estimated time: ~15 mins Required item: 2.1 Organization name & Display ...

    • Member Information Management (Guest Screen)

      Purpose: This section is to explain how user can view and Edit their membership information in My Account Page. 1. How to Sign in to My Membership Account Step 1 ・Guests can log in by clicking [Sign in] and choose [Membership sign in] button at the ...