1. Facebook
2. LINE
3. Open IDプロトコルを使用しているサービス
   

Facebook・LINEについてはID等の連携を行わず設定をONにした場合、triplaの設定を利用しサインオンさせることが可能です。

SNSログイン方法

tripla管理画面で行うSSO設定は、ブランド単位での設定です。

■施設毎のSSO設定をONにしている場合 既に施設毎のSSO設定をONにしている施設様は、引き続き施設毎の設定をご利用いただけます。 また、既に施設毎のSSO設定をONにしている施設様にもブランドのSSO設定が表示されますが、施設毎のSSO設定が優先されます。 なお、施設のSSO設定をOFFにして、ブランドSSO設定をONにすると、ブランドSSO設定が利用されます。

■施設毎のSSO設定をOFFにしている場合 施設毎のSSO設定をOFFにしている施設様は、施設毎のSSO設定の項目が非表示となり、ブランドのSSO設定が利用されます。

現在施設毎のSSO設定を利用されている場合は、ブランドのSSO設定へ移行をお願いいたします。

Facebookアプリ設定方法（サブドメイン機能使用時）

アカウント作成

アプリの作成を行います。

画面右上か中央に配置されている[アプリの作成]を選択します。

任意のアプリタイプの選択を行います。

アプリ名・メールアドレスを入力し、[アプリを作成]を選択します。

作成を行うと下の画像のような画面に遷移します。

[アプリの設定]→[ベーシック]を選択します。

下の表のように設定を行ってください。

設定が完了したらアプリのモードを[開発]から[ライブ]に入り替えます。

[ダッシュボード]→[アプリに製品を追加]から[ビジネス用Facebookログイン]の[設定]を選択します。

[埋め込みブラウザーOAuthログイン]・[JavaScript SDKでログイン]を[はい]に切り替えます。

[有効なOAuthリダイレクトURI]には、サブドメインを使用している場合はサブドメインURLを入力し、使用していない場合は自社ホームページのURLを入力します。

[JavaScript SDKに許可されたドメイン]にはホテルのURLとブッキングウィジェット (サブドメインもしくは tripla ブッキングウィジェット) のURLを入力します。

入力が完了したら画面下部の[変更を保存]を選択します。

ブランド管理画面の[管理者設定]→[シングルサインオン(SSO)設定]を選択します。

シングルサインオン設定をONにし、[SSOを追加する]からFacebookを選択します。

アプリID・秘密鍵を入力します。

アプリID・秘密鍵はFacebook Developerの[設定]→[ベーシック]画面で確認可能です。

入力後[保存]を選択し設定完了です。

既に施設毎のSSO設定をONにしている施設様は、施設毎の管理画面の[設定]→[ウィジェット設定]→[ログイン表示設定]画面から引き続きSSO設定をご確認いただけますが、ブランドのSSO設定へ移行をお願いしております。

※サブドメインの設定によりブッキングエンジンの立ち上げURLが異なります。
サブドメインを利用している場合：サブドメインのURLのみ
サブドメインを利用していない場合：http://のつかないURL
本番環境でアプリを使う際はProductionモードへ変更してください。

https://developers.facebook.com/docs/apps/?locale=ja_JP#register

LINEアプリ設定方法（サブドメイン機能使用時）

1. LINE Developers Portalにアクセスし、BotのLINE連携をしている既存のプロバイダーがある場合はその傘下に、ない場合は新しいプロバイダーを作成し、新しいチャネルを登録してください。

2. チャネルにてLINEログインを登録してください。

3. 入力必須項目を登録してください。ウェブアプリを選択してください。

4. コールバックURLにブッキングエンジンのURLを登録してください。

本番環境でアプリを使う際は公開してください。

参考情報

https://developers.line.biz/ja/docs/line-login/integrate-line-login/

管理画面設定

ブランド管理画面の[管理者設定]→[シングルサインオン(SSO)設定]を選択します。

シングルサインオン設定をONにし、[SSOを追加する]からLINEを選択します。

LINE Developer PortalのBasic Settingsに記載されているLINEチャネルIDとLINEチャネルシークレットを登録してください。

LINEログイン設定に記載されているLINEコールバックURLを登録してください。

更新するを押して設定を保存してください。

LINEDevelopersの設定（サブドメイン機能使用時）

下のリンクからログインを行ってください。

LINE Business ID

プロバイダーの作成を行います。

プロバイダーの右に表示されている[作成]を選択します。

任意の名前を設定し、[作成]を行います。

[Messaging API]を選択します。

新規チャネル作成画面が開きますので、適当な内容の入力を行います。

[作成]を選択し、規約を確認の上、同意を選択すると作成は完了です。

[チャネル基本設定]画面を開きます。

画面下部の[OpenID Connect]→[メールアドレス取得]→[申請]を選択します。

メールアドレス取得制限の申請という画面が表示されますので、

表示される２つのチェックボックスにチェックを入れ、保存を選択します。

メールアドレス取得が「申請済み」と表示されると設定完了です。

[LINEログイン設定]を選択し、コールバックURLを入力します。

tripla管理画面での設定を行います。

ブランド管理画面の[管理者設定]→[シングルサインオン(SSO)設定]を選択します。

シングルサインオン設定をONにし、[SSOを追加する]からLINEを選択します。

下の表の通り設定を行ってください。

ログインを行う際に下のようなエラー画面が表示される場合、コールバックURLが間違っている場合があります。
エラーページのURLに表示されている「redirect_uri=」の後ろに表示されているURLをコールバックIDに追加してください。

例：https%3A%2F%2Fbooking.tripla-ryokan.com
※%3Aは「:」に、%2Fは「/」に変更し登録を行ってください。

既に施設毎のSSO設定をONにしている施設様は、施設毎の管理画面の[設定]→[ウィジェット設定]→[ログイン表示設定]画面から引き続きSSO設定をご確認いただけますが、ブランドのSSO設定へ移行をお願いしております。

GoogleとのSNS連携

Google側での設定

国・利用規約・電子メールの送信について確認を行い、[同意します]を選択します。

[プロジェクトを選択]→[新しい計画]を選択します。

プロジェクト名・位置を設定し、[保存]を選択します。

OAuth 同意画面の設定

[APIとサービス]→[OAuth 同意画面]を選択します。

OAuth 同意画面からUser Typeを外部に設定し[作成]を選択します。

[作成]を選択すると下の画像のような画面が表示されます。

以下の表のように設定を行ってください。

設定が完了したら[保存して次へ]を選択します。
スコープの設定画面が表示されます。
[スコープを追加または削除]を選択します。

フィルタの中から以下の3つのチェックボックスにチェックを入れます。
・Google アカウントのメインのメールアドレスの参照
・ユーザーの個人情報の表示（ユーザーが一般公開しているすべての個人情報を含む）
・Google で公開されているお客様の個人情報とお客様を関連付ける

設定が完了したら[保存して次へ]を選択します。

テストユーザーの設定画面が表示されます。
テストを行い、アプリの動作確認を行う場合はユーザーの追加を行ってください。

設定が完了したら[保存して次へ]を選択します。

概要が表示されます。

内容に間違いがない事を確認し、[ダッシュボードに戻る]を選択してください。

[ダッシュボードに戻る]を選択すると登録した詳細を確認する事が可能です。

認証情報の設定

認証情報の設定を行います。
画面左側のメニューから[認証情報]を選択します。

[＋認証情報を作成]→[OAuthクライアントID]を選択します。

アプリケーションの種類から[ウェブアプリケーション]を選択します。

OAuth クライアント ID の作成を行います。
以下の表のように設定を行ってください。

設定が完了したら[保存]を選択します。
作成を行うとOAuth クライアント IDの一覧に作成した認証情報が表示されます。
選択すると詳細を確認する事が可能です。

クライアントID・クライアントシークレットを確認し、tripla管理画面に登録を行います。

tripla管理画面での設定

■施設毎のSSO設定をONにしている場合 既に施設毎のSSO設定をONにしている施設様は、引き続き施設毎の設定をご利用いただけます。 また、既に施設毎のSSO設定をONにしている施設様にもブランドのSSO設定が表示されますが、施設毎のSSO設定が優先されます。 なお、施設のSSO設定をOFFにして、ブランドSSO設定をONにすると、ブランドSSO設定が利用されます。

■施設毎のSSO設定をOFFにしている場合 施設毎のSSO設定をOFFにしている施設様は、施設毎のSSO設定の項目が非表示となり、ブランドのSSO設定が利用されます。

現在施設毎のSSO設定を利用されている場合は、ブランドのSSO設定へ移行をお願いいたします。

ブランド管理画面の[管理者設定]→[シングルサインオン(SSO)設定]を選択します。

シングルサインオン設定をONにし、[SSOを追加する]から[カスタム]を選択します。

カスタムを選択すると下の画像のような画面が表示されます。

以下の表のように設定を行ってください。

既に施設毎のSSO設定をONにしている施設様は、施設毎の管理画面の[設定]→[ウィジェット設定]→[ログイン表示設定]画面から引き続きSSO設定をご確認いただけますが、ブランドのSSO設定へ移行をお願いしております。

設定が完了すると会員登録画面に下の画像のように表示されます。

こちらでGoogleとのSNS連携は完了です。

Yahoo!とのSNS連携

Yahoo!側での設定

Yahoo!デベロッパーネットワークのサイトにログインを行い、プロジェクトの作成を行います。

下のURLからログインを行ってください。
https://e.developer.yahoo.co.jp/dashboard/

ログインを行うと下の画像のような画面が表示されます。

[新しいアプリケーションを開発]を選択してください。

アプリケーション情報の入力を行います。
下の表の通り設定を行ってください。

タイトル	詳細
ID連携利用有無	ID連携を利用する
アプリケーションの種類	サーバーサイド
利用者情報	個人
メールアドレス	ログインを行っている場合「設定済み」と表示されます。
個人情報提供先としてユーザーへ開示することに同意しますか？	同意する
代表者氏名/氏名	任意の氏名を入力してください。
契約者住所の国または地域	登録を行う施設様の任意の国・地域を入力してください
契約者住所	登録を行う施設様の任意の住所を入力してください
アプリケーション名	任意の名称を入力してください。
サイトURL	サイトのURLにパラメーター「?tripla_booking_widget_open=signUp」を付けた状態のものを入力してください。
プライバシーポリシーURL	プライバシーポリシーURLを入力してください。
利用規約URL	利用規約URLを入力してください。
利用規約、ガイドラインおよびプライバシーポリシーに同意しますか？	[同意する]を選択してください。

入力が完了したら、[確認]を選択し登録を行ってください。
登録を行うと、Client ID・シークレットが発行されます。
[アプリケーションの管理トップへ]を選択します。

[アプリケーション一覧]から作成したアプリケーションの[編集]ボタンを選択します。

コールバックURLの設定を行います。４点のURLの記載を行ってください。

タイトル	詳細
サブドメインを利用している場合	・サブドメインを利用したURL/sso/custom/callback ・サブドメインを利用したURL/sso/custom/callback/ ・https://bw.tripla.ai/sso/custom/callback/ ・https://bw.tripla.ai/sso/custom/callback
サブドメインを利用していない場合	・施設のURL/sso/custom/callback ・施設のURL/sso/custom/callback/ ・https://bw.tripla.ai/sso/custom/callback/ ・https://bw.tripla.ai/sso/custom/callback

tripla管理画面での設定

■施設毎のSSO設定をONにしている場合 既に施設毎のSSO設定をONにしている施設様は、引き続き施設毎の設定をご利用いただけます。 また、既に施設毎のSSO設定をONにしている施設様にもブランドのSSO設定が表示されますが、施設毎のSSO設定が優先されます。 なお、施設のSSO設定をOFFにして、ブランドSSO設定をONにすると、ブランドSSO設定が利用されます。

■施設毎のSSO設定をOFFにしている場合 施設毎のSSO設定をOFFにしている施設様は、施設毎のSSO設定の項目が非表示となり、ブランドのSSO設定が利用されます。

ブランド管理画面の[管理者設定]→[シングルサインオン(SSO)設定]を選択します。

シングルサインオン設定をONにし、[SSOを追加する]から[カスタム]を選択します。

カスタムを選択すると下の画像のような画面が表示されます。
以下の表のように設定を行ってください。

tripla管理画面での表記	設定内容
タイトル	お客様画面に[タイトル]でログインと表示されます。
ドキュメントURL	ドキュメントURLは、OpenIDプロバイダーの設定情報をJSON形式で提供するURLを指します。この情報は、クライアントがOpenIDプロバイダーとやり取りするために必要な各種のエンドポイントやサポート情報を含みます。
レスポンスタイプ	code・id_tokenの二種類から選択してください。
IdP URL	施設様で利用しているIdP URL
クライアントID	Yahoo!で作成したClient ID
シークレットトークン	Yahoo!で作成したシークレット
ロゴをアップロード	お客様画面に表示されるログインボタンの左端に表示されるロゴのアップロード
ボタンの色　背景色	お客様画面に表示されるログインボタンの背景色を選択する事が可能です。
ボタンの色　テキストカラー	お客様画面に表示されるログインボタンのテキストカラーを選択する事が可能です。

既に施設毎のSSO設定をONにしている施設様は、施設毎の管理画面の[設定]→[ウィジェット設定]→[ログイン表示設定]画面から引き続きSSO設定をご確認いただけますが、ブランドのSSO設定へ移行をお願いしております。

設定が完了すると会員登録画面に下の画像のように表示されます。