firebase

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

前置き

今回はTwitterアカウントでログイン🐥
Twitterはユーザー数が多いので
これができたらすっごく便利です💕

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

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


Step1: Twitter Developerアカウント作成の申請

Googleログインとは違い
外部のアカウントでログインします。
Twitter Developerを使用します🌟

まずはfirebaseのGuidesを見てみましょう👀
Before you begin
4. Register your app
API keyなどが必要ですね💡

Twitter Developer でアカウント作成

Twitter Developer へ飛びましょう!🐥
ここでアプリを作成し、
API keyを入手します!

Twitterアカウントでログインし、
メニュー右上のAppsをクリック
Create an appをクリック
申請の仕方などはここが参考になります

申請文を英語で書く

ここで皆さんビックリすることでしょう😲
申請理由を英語200文字以上で
書かねばなりません!笑
ログインです、ログイン!笑
とにかくログイン機能の実装したい!
ってことを伝えましょう🌟
Google翻訳を使いました📚

例文)
I want to implement login with a Twitter account on my website. I have already implemented login with a google account. All I have to do now is Twitter and facebook! It is very convenient to be able to log in with an already created account.

グーグルアカウントの
ログインは実装しちゃってて
あとはこのTwitterとFacebookアカウントでの
ログインをしたいんです!
って内容です。
これで無事承認されました🤗


Step2: アプリを作成する

申請が通るとメールが届きます💌
メール内のbutton押すと
アカウントが作成されます🌟

次は実際にアプリを作成していきましょう!

1. Headerにあるアカウント名から > Apps を押す

2. Create an app を押す

3. 必須項目の入力し、createを押す

  • App name:アプリの名前
  • Application description:
    アプリの説明(英語10〜200文字)
  • Website URL:
    アプリを使用するウェブサイトのURL
  • Tell us how this app will be used:
    アプリの使用方法
    アプリの説明とほぼ同じでOK
    (英語100文字〜)
  • Callback URLs
    こちらは必須ではないですが
    後ほど入力します!

これでアプリの完成です🤗


Step3: firebaseと連携

アプリが完成したので
API keyなどの確認をしていきましょう!

1. アプリのDetailsをクリック

2. Keys and tokensタブをクリック

API key, API secret key が見れます👀
これをfirebaseにコピペしましょう!

3. firebaseにコピペ

プロジェクトサイドメニューAuthentication
> Sign-in method > Twitter
> App ID とApp secretをペースト
ここでコールバックURLをコピーしましょう!

4. コールバックURLを貼り付け

Twitter DevelopersアプリのDetailsで
App detailsタブのEditをクリック
Step2で一旦空欄にしていた
Callback URLsにペーストしましょう🌟

これで設定は完了です🤗


Step4: コードを追加

Handle the sign-in flow with the Firebase SDK

解説

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

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

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

  • 不要な物を削除
    コメント
    セミコロン(;)
    var token
    var user
    state, checkLoginのemail
    →メールアドレスログイン時に
     ユーザーのemailを取得し、
     表示させるために記載していたもの
     SNSアカウントを使用するため不要

コード

) file

) pages

) pages

ログインはこれだけです🌟
Twitter Developerの申請さえ通れば簡単ですね♪

また別記事でこちらも公開していきます!
アカウント作成の方法
ログアウトの仕方

-firebase
-, ,

© 2020 aLiz Nuxt