SNSログイン機能を実装してみた（１）
はじめに
先日、「Amplify のプレビュー機能を有効化してみた話」という記事を投稿したのですが、その中でAuthenticationの機能を追加しました。
本日はその続きで、「やっぱり SNS でログインできないとね」という欲が出てきましたので、SNS ログイン機能を実装してみたいと思います。
Amplify のドキュメントを見るとかんたんにできそう！
というわけで、さっそくドキュメントを眺めつつ実践してみたいと思います。
過去の記事はコチラ！↓
Amplify でプレビュー機能を有効化してみた話
完成予想
こちら公式ドキュメントからの引用ですが、こんな感じのものを想像しています。
（今回は Google のログインしかやらないけど）
Google のアカウント作成
で、まず何をやるのか。
Google の開発者コンソールで環境の準備が必要そうですね。
Google 開発者コンソールに移動してみます。
プロジェクトの選択をクリックします。
新しいプロジェクトをクリックします。
プロジェクト名を入力し、作成をクリックします。
プロジェクトが作成されたら、左側のナビゲーションメニューからAPI とサービス > 認証情報を選択します。
同意画面を構成をクリックします
作成をクリックします
アプリ名とユーザーサポートメールを入力して、保存して次へボタンをクリックします。
保存して次へボタンをクリックします。
保存して次へボタンをクリックします。
テストユーザーは 1 人必要かなと思い、自分のメールアドレスを 1 件追加しました。
その後、保存して次へボタンをクリックします。
次に、認証情報を作成しなければならないようです。
認証情報を作成 > OAuth クライアント IDを選択します。
アプリケーションの種類と名前の入力が必要のようで、選択、入力していきます。
その後、作成ボタンをクリックします。
これで OAuth クライアント作成の完了です！
次の作業はamplify add authだったのですが、こちらは前回実施済みなのでスキップします。
// 前回作成済みなので、今回はスキップ
amplify add auth
1 つ設定忘れ。
OAuth クライアントのところで、承認済みのJavaScript生成元と承認済みのリダイレクトURIを追加します。
ここは、Amplify の URI を設定しました。
画面下にOAuth クライアントを保存しましたと表示されれば OK！
フロントエンドのセットアップ
Google の設定が終わったので、実装に入ります。
修正はこれだけでいいみたい。
export function App({ signOut, user }: WithAuthenticatorProps) {
return (
<Flex direction="column" justifyContent="center">
- <Authenticator>
+ <Authenticator socialProviders={['amazon', 'apple', 'facebook', 'google']}>
{({ signOut, user }) => (
<main>
<div className="App">
（省略）
</div>
</main>
)}
</Authenticator>
</Flex>
)
}
いざ、実行してみましょう。
・
・
・
え！？変わらん・・なぜだ・・
さいごに
というわけで、今回は失敗に終わってしまいました。
だけど、もう少し粘ってみます。
次回はもう少し原因の調査などを行ってみたいと思います。
Discussion