Vue.js｜Firebase v9のAuthenticationでTwitter認証実装 ~ ログインまで
Firebase v9のAuthenticationでTwitter 認証を実装します。
ネットで検索してもv8の内容が多く、せっかくなのでv9の内容を残しておきます。
ただし、Firebaseの登録方法など過去の情報と大して差分がない場合は割愛していきます。
FirebaseでTwitter認証実装までのマイルストーン
ざっくり以下のマイルストーンがあります。
- Twitter Developersでアプリ作成
- Firebaseでプロジェクト作成、設定
- 上記2つの設定・情報を利用していざ実装
- 実際にログインしてみる
Twitter Developersでアプリ作成
こちらからアプリ作成、設定します。
具体的な設定方法はこちらに詳細書かれてますので参考にしてみてください。
Firebaseでプロジェクト作成、設定
Firebaseに登録して、プロジェクトを作成します。
作成後、メニュー一覧からAuthenticationを選択します。表示された画面に4つのタブがあるので、Sign-in methodを選択します。
Sign-n methodでTwitterを有効にします。
ひとまずこちらでプログラム以前の下準備は完了です。
いざ実装
Vue CLIで生成された基本的なVue.jsのディレクトリ構成を前提に話を進めます。
Firebase設定情報を作成
Firebase管理画面で設定すると、設定情報（apiKeyなど）が提供されますので、ファイルとして保存します。
みなさんGitによる管理をしていると思うので、設定情報がgit上で公開されないような管理にします。
まずは、以下のファイルをsrcディレクトリ配下に新規作成します。
export const firebaseConfig = {
apiKey: "******************",
authDomain: "******************",
projectId: "******************",
storageBucket: "******************",
messagingSenderId: "******************",
appId: "******************",
measurementId: "******************"
};
exportして別ファイルで利用できるようにしているので、利用したい場合importします。
.gitignoreで上記ファイルを外せばokです。ちなみに、giboを使うと便利です。
Firebaseをプロジェクトで利用可能にする
設定ファイルを使って、プロジェクトでFirebaesを利用可能にする設定をします。
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import router from './router'
// このあたりがv8と違います
import { initializeApp } from "firebase/app";
// 設定ファイルをimport
import { firebaseConfig } from './firebase-config.js';
Vue.config.productionTip = false
// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
export { firebaseApp };
new Vue({
router,
render: h => h(App)
}).$mount('#app')
ログインUIを実装する
こんなろログインUIを実装します。ログイン前後で画面遷移などは実装せず、consoleで情報が取得できるところまで確認します
今回はVuetifyを使ってUIを作っています。便利
<template>
<v-app>
<v-main>
<v-container fill-height>
<v-card width="400px" class="mx-auto mt-5">
<v-card-actions>
<v-col>
<v-btn
@click="signin"
block
class="text-transform py-4 my-2"
color="primary"
>
Twitterでログイン
</v-btn>
<v-btn
block
text
class="text-transform py-4 my-2"
color="primary"
>
新規登録はこちら
</v-btn>
</v-col>
</v-card-actions>
</v-card>
</v-container>
</v-main>
</v-app>
</template>
<script>
// import firebaseApp from '@/src/main.js'
import { getAuth, signInWithPopup, TwitterAuthProvider } from "firebase/auth";
export default {
name: 'Login',
methods: {
signin: () => {
const provider = new TwitterAuthProvider();
const auth = getAuth();
signInWithPopup(auth, provider)
.then((result) => {
// The signed-in user info.
const user = result.user;
if (user) {
console.log(user);
} else {
alert('有効なアカウントではありません')
}
}).catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
console.log(errorCode + "@@@" + errorMessage);
});
}
}
}
</script>
Twitterでログインをクリックすると認証画面に遷移し、認証後にconsoleからユーザー情報にアクセスできます。その情報を利用してさらにTwitter APIを叩きにいって、追加情報を取得できるようです。
js部分はほとんど公式ドキュメントをコピペですので、詳細はそちらを参考にしてください。
Discussion