💬

SNSログイン機能を実装してみた（２）

2023/09/23に公開

はじめに

前回、「SNS ログイン機能を実装してみた（１）」では、SNS ログイン機能の実装に挑戦しました。
しかし、これが失敗に終わったため、再チャレンジです。

まずは原因を探るべく、Amplify Studioを覗いてみることにしました。
Amplify Studio > Authenticationの状態を見てみます。

おろ！？Add login mechanismという設定があるぞ。
ドロップダウンをクリックしてみると、SNS の設定項目が。。
ひょっとしてこれなんじゃ！？

とりあえず、Googleを選択してみましょうか。
あ、項目増えましたね。
Web Client ID、Web Client Secretってなんだ？

あ！認証情報作ったときに出てきたなー。
あれって、控えとかなきゃいけないやつ〜〜？
->Web Client IDは表示されているけど、Web Client Secretが見当たらないや

仕方ないので、もう一度認証情報を作り直してみます。

あ、やっぱりあったや。
（JSON をダウンロードしとこう・・）

ローカルの URL と、デプロイ環境の URL を追加しておきます。

deployボタンをクリックします。

deploy 完了したみたいです。
書いてある指示通りに実行してみますか。

amplify の設定を取得するのに、amplify pullコマンドを実行していきます。

amplify pull --appId <appId> --envName <envName>

環境が整ったはずなので、ローカルで実行してみましょう。

npm start

おっ！、項目自体は出てきました！！！

これでできたっしょ！と思ったのですが・・

うーむ、、何か設定を間違えたのだろうか・・