設定したあとの確認
提供元ごとに1回ログインして通ることを確かめる手順・戻ってきたときに出るもの・止まった場所での切り分け
設定したあとの確認
提供元ごとに1回ずつ、実際にログインして通ることを確かめます 終わると、4提供元のログインが利用者に使える状態だと分かります
開発の担当が識別子と合鍵をサロン側へ入れ終わってから行ってください
0. 読む前に(このページの前提)
済んでいること
- 4提供元それぞれのアプリ作成・戻り先 URL の登録・鍵の受け渡し
- 済んでいない提供元があれば、先に
01_Google.md〜04_X.mdを進めてください
確かめる人のアカウントを先に登録しておく
開発中のアプリは登録した人しかログインできません 確かめる人のアカウントを、あらかじめ各提供元へ登録しておいてください
| 提供元 | 登録する場所 |
|---|---|
| テストユーザー | |
| LINE | 権限設定 |
| アプリの役割 |
1. 確かめ方
- 会員のログイン画面を開く
- 検証環境:
https://dev.tolandsalon.com/member/login - 本番:
https://tolandsalon.com/member/login
- 検証環境:
- [Google でログイン] を押す
- 他の提供元は [LINE でログイン]・[X でログイン]・[Facebook でログイン]
- 提供元の画面が出たら、アカウントを選んで許可する
- サロンの画面へ戻る
会員登録の画面(/signup)にも同じボタンが並びます(文言だけ [Google で登録] のように変わります)
2. 戻ってきたときに出るもの
どれかが出れば成功です
- すでにその SNS を連携している会員
- 「ログインしました。移動しています…」と出て会員ページへ進む
- 同じメールアドレスの会員がいて、提供元がそのメールを保証している(Google・LINE・Facebook)
- 自動で連携され、会員ページへ進む
- 同じメールアドレスの会員がいるが自動で連携できない(X の場合・会員が本登録前の場合)
- 「メールアドレスの確認が必要です」と出る
- 案内どおりパスワードでログインしてから連携を追加します
- はじめての人
- 「登録情報の確認」の入力欄が出る
- X のときはメールアドレスが空欄=自分で入力します
- すでにログイン済みの人が押した
- 「◯◯ との連携を追加しました」と出て [会員ページへ] のリンクが並ぶ
3. うまくいかないときの見分け方
どの段階で止まったかで原因が分かれます
| 止まった場所 | 画面に出るもの | 疑うところ |
|---|---|---|
| ボタンを押した直後(提供元の画面へ行かない) | 「SNSログインを開始できませんでした…」/「◯◯ でのログインを開始できませんでした…」 | サロン側に識別子と合鍵が入っていない |
| 提供元の画面へ移った直後 | 提供元のエラー画面 | 戻り先 URL の登録違い |
| 同意ボタンを押した直後 | 「Bad Request」など提供元のエラー | LINE のメールアドレス取得権限が未申請 |
| サロンへ戻ってきてから | 「SNSログインを完了できませんでした」 | 合鍵の入れ違い・時間の経ちすぎ |
疑うところごとの動き方
| 疑うところ | すること |
|---|---|
| 識別子と合鍵が入っていない | 開発の担当へ連絡 |
| 戻り先 URL の登録違い | 入口ページ README.md §3-2 の表と1文字ずつ見比べる |
| LINE のメールアドレス取得権限が未申請 | 02_LINE.md §6 の申請を行う |
| 合鍵の入れ違い・時間の経ちすぎ | もう一度やり直す |
症状ごとの直し方は 06_つまずいたときは.md にまとめてあります
4. このページで撮る写真(1枚)
撮った画像は images/ へ、下のファイル名で保存します(本文の <!-- 写真: ... --> の位置に差し込まれます)
-
images/confirm-01-ログイン画面のSNSボタン.png… 会員ログイン画面の SNS ボタン4つが並んだところ
撮り方の共通の注意
- 画面の全体ではなく、操作する箇所が分かる範囲を切り取る
- 押すボタンには印(囲み)を付けると迷いません