この記事では、FirebaseでSNS認証を作成する方法についてまとめます。

Twitter認証の作成

FirebaseでTwitter認証を有効化

FirebaseのサイドバーにAuthenticationの箇所を開きます。ログイン方法のタブを開くと各認証方法の有効化・無効化の設定画面が現れます。

Twitterの設定を上の様に有効化して下さい。

その他にAPIキー・APIシークレット・コールバックURLの設定があります。こちらはTwitter Developer Toolのキーを入力します。

TwitterのDeveloperアカウントでアプリケーションを作成します。すると上図の様なAPIキー・APIシークレットキーが与えられます。

これらのキーをFirebaseのTwitter認証の有効化のフォームに設定します。

またApp detailsにはCallback URLを設定する項目があります。こちらにFirebaseのTwitter認証有効化で『設定を完了するには、このコールバック URL を Twitter アプリの設定に追加します。』で与えられたURLを設定します。

Firebase側にAPI Key・API Secret Key
Twitter App側にコールバックURL

上記の設定をする事でTwitter認証のための設定は完了です。

コードを書く

Project Overviewをクリックし、赤枠で囲んだ箇所、またはアプリを追加をクリックします。

こちらをスクリプトに書きます。

<script src="https://www.gstatic.com/firebasejs/5.5.9/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyBUB7hCWLmnAE6bFCAgFDzg-Ws1KWjeKVM",
    authDomain: "test-project-3c0e4.firebaseapp.com",
    databaseURL: "https://test-project-3c0e4.firebaseio.com",
    projectId: "test-project-3c0e4",
    storageBucket: "test-project-3c0e4.appspot.com",
    messagingSenderId: "540040576830"
  };
  firebase.initializeApp(config);
  const provider = new this.firebase.auth.TwitterAuthProvider()
      this.firebase.auth().signInWithRedirect(provider)
        .then(result => {
          result.credential.accessToken//token
          result.credential.secret//secret
          result.user//user
        })
        .catch(error => {
          console.log(error)
        })
</script>

configに関しては自身のものを与えて下さい。

認証が成功した場合はthenが、失敗した場合はcatchが実行されます。(ES6のPromise)

Facebook認証の作成

Facebook for developersでアプリを追加します。

アプリIDとapp secretが与えられます。こちらをFirebaseのTwitter認証有効化の箇所に設定します。

こちらの箇所にFacebook developerで与えられたアプリIDとシークレットを設定します。

またリダイレクト先のURLがFirebaseから与えられますので、そちらをfacebook for developersの有効なOAuthリダイレクトURIに設定します。

あとはTwitter認証の場合と同様にAPIでfirebaseインスタンスを生成し下記のコードで認証させます。

const provider = new firebase.auth.FacebookAuthProvider()
 provider.addScope('user_birthday')
 firebase.auth().signInWithPopup(provider)
        .then(data => {
          console.log(data)
        })
        .catch(error => {
          console.log(error)
        })

Google認証の作成

Googleアカウントで認証させる場合は特別な設定は必要ありません。同様にFirebaseインスタンスを生成して下記のメソッドで認証が可能です。

var provider = new firebase.auth.GoogleAuthProvider()
 firebase.auth().signInWithPopup(provider)
        .then(user => {
          console.log(user)
        })
        .catch(error => {
          console.log(error)
        })

GitHub認証の作成

GitHubでの認証にはDeveloper settingからNew OAuth Appでアプリを作成します。

あとはアプリケーションの作成が完了すると次の様にClient IDとClient Secretが与えられます。

Client IDとClient SecretをFirebaseに設定します。またAuthorization callback URLにFirebase側から与えられる下図のURLを設定します。

こちらにGitHubから与えられたクライアントIDとシークレットを設定し完了です。

他と同様にFirebaseインスタンスを生成し下のメソッドで認証を作成する事が出来ます。

const provider = new firebase.auth.GithubAuthProvider()
 firebase.auth().signInWithPopup(provider)
        .then(user => {
          console.log(user)
        })
        .catch(error => {
          console.log(error)
        })