firebase

【Nuxt.js】firebase基礎編(Auth版):facebookログインをできるようにしよう

前置き

既に作成されたSNSアカウントで
ログインできるって便利ですよね✨🚲
今回はFacebookでログインしてみましょう🙋‍♀️

メールアドレスログイン
要領は同じです!
コードもこちらに付け足します✍️

ということで
firebaseAuthを使います💡


Step1: FBアプリの作成

外部のアカウントでログインするため
もろもろ必要になります🌟

Facebookサインインについてはこちら👀
Before you begin
1は済んでいるので2から始めましょう!

Facebook for Developers
ここでアプリを作成し
App IDとApp secretを確認していきます💡

1. まずはFBアカウントでログイン

2. マイアプリをクリック

 (ログインの文字がマイアプリに変わってます)

3. 新しいアプリを作成

4. アプリ名を入力

「アプリIDを作成してください」をクリック
セキュリティチェックが通ればアプリが作成されます🌟


Step2: FBアプリの連携

1.App IDとApp secretを確認

アプリが作成されると
そのままアプリのダッシュボードへ行きます。
サイドメニュー 設定 > ベーシック

2. firebaseに貼り付ける

firebaseのプロジェクトサイドメニューAuthentication
> Sign-in method > Facebook
> App ID とApp secretをペースト

3. OAuth リダイレクト URIをコピー

App ID と App secretの下にあります🌟


Step3: OAuthリダイレクトURIの設定 

1. Facebookログインの設定

製品を追加 > Facebookログイン > 設定

2. 設定に移る

クイックスタートの画面に飛びますが
サイドメニューの設定をクリックします!

3. 有効なOAuthリダイレクトURIを入力

ここにfirebaseでコピーしたURIを貼り付けます!
これで設定は完了です🤗✨


Step4: コードを追加

Handle the sign-in flow with the Firebase SDK

解説

store/index.js

必須項目:1, 5
Optional:2, 3, 4

ということで必須項目だけ
Vuexにコピペしていきます。

  • actions loginFacebookを作成
    ログインできたら
    ログイン状態をtrueにしたいので
    それを行うcheckLoginをdispatchで呼ぶ

  • 不要な物を削除
    コメント
    セミコロン(;)
    var token
    var user

コード

) file

) pages

) pages

ログインはこれだけです🌟
意外とシンプルですよね!
アカウント作成や、
ログアウトの仕方はまた別記事にて♪

-firebase
-,

© 2024 aLiz Nuxt