Unity使いがゼロから始めるWebサービス制作！②

はじめに

前回紹介されていただいたこちらの本を今勉強しています。
blog.nabettu.com

この本の中ではGoogleアカウントでログインをしているのですが、ぜひTwitterログインも実装してみましょう！という事が書かれてます。

ということで私も挑戦してみて、実装が一通りできたので紹介したいと思います。

Twitter API 登録

まずはTwitter API 登録をして承認されなければなりません。

実は最近承認が少し厳しくなったらしく、300文字の英作文をしなければならなくなりました。
少し面倒ですが、うまくGoogle翻訳等を活用して挑戦してみてください。

こちらの記事が参考になると思います！
qiita.com

ちなみに私は申請してからちょうど1日で承認のメールがきました！

アプリの作成

上の記事にもかいてあるのですが、Twitter API登録の後はアプリケーション情報登録をしましょー！

Firebaseの設定

つぎにFirebaseを開き、Authenticationを開きます。
プロバイダのTwitterを有効にしましょう。

こちらの記事を参考にしましょう。
cr-vue.mio3io.com

Home.vueの書き換え

ここまでで下準備はできたので、さっそくコードを変更していきましょう。

<button @click="googleLogin">Googleアカウントでログイン</button>
・
・
・
googleLogin: function () {
        firebase
          .auth()
          .signInWithRedirect(new firebase.auth.GoogleAuthProvider());

このコードを以下のように書き換えてみてください。

<button @click="twitterLogin">Twitterアカウントでログイン</button>
・
・
・
twitterLogin: function () {
        firebase
          .auth()
          .signInWithRedirect(new firebase.auth.TwitterAuthProvider());
}

これでTwitterログインへの変更は完成です！

また、App.vueのfirebase.auth().onAuthStateChangedのところは変更をしなくても大丈夫です。

もっと詳しく知りたいかたはこちらを参照しましょう。
JavaScript で Twitter を使用して認証する | Firebase