こんにちは!いっちーです。
皆さんはアプリのログインはどのように実装していますか?
今回プライベートでのWebアプリ作成時にFirebase Authenticationを試したら
ログインの実装を数行で済ますことができて大変便利だったので、
この記事ではFirebase Authenticationを使ってログインを実装する方法を紹介したいと思います。

込み入ったことをしなければFirebaseにログイン周りを丸投げすることができます!
Firebase Authenticationとは?
Firebase AuthenticationとはGoogleが提供している認証処理サービスです。
認証のロジック部分をFirebase Authenticationに任せることができるので、
アプリ側では難しい処理は必要なく簡単にログインが実装できます。
対応しているログイン方法
Firebase Authenticationは以下のログイン方法に対応しています。
料金
Firebaseには料金プランが2つあり、
無料のSparkプランと有料のBlazeプランから選択できます。
認証に関しての料金プランは、
Sparkプランで提供されるのは、電話認証が1万/月とその他の認証サービスで
Blazeプランでは電話認証が$0.01/認証となっています。
電話番号認証以外はSpark・Blaze共に使うことができます。
料金プランの詳細はFirebase公式HPをご覧ください。

無料プランだったとしても様々なサービスの認証が使えるFirebase Authentication、すごすぎない!?
Firebaseを使用してログインを実装
ここからはFirebase Authenticationを使用したログインの実装方法に関して解説します。
Firebaseプロジェクトの作成
まずはFirebaseのプロジェクトを作成します。
以下のURLにアクセスしてプロジェクトを作成します(Googleアカウントが必要です)
プロジェクトの作成をクリックします。

プロジェクトに名前をつけて続行をクリックします。

Googleアナリティクスを新規プロジェクトで使用するか尋ねられ、使用する場合はアカウントを選択します。

プロジェクトを作成ボタンを押すとプロジェクトが作成されます。


これでプロジェクトの作成は完了です!
プロジェクトのダッシュボートに移動します。
最初はSparkプラン(無料プラン)になっていることを確認します。

また、Firebaseにアプリの登録も必要なので登録します。
アプリはFirebaseコンソールトップの「アプリを追加」ボタンから追加できます。
プラットフォームは必要に応じて選択します。(今回はWebを選択した程で進めます)

アプリに名前をつけるとSDKを使うために必要なapiKeyなどの情報が表示されます。
後から、
サイドバーのプロジェクトの設定(歯車マーク) > 全般 > マイアプリ
から確認できますのでここはスルーでOKです。

ダッシュボードからAuthenticationに移動します。
以下の画面が表示されるので始めるをクリックします。

最後にアプリ認証をするための設定を有効にします。
Authentication > Sign-in method から使用したいログインプロバイダのステータスを有効にしておきます。


これでFirebase側の設定は完了です!
ログインを実装
さて、準備も終わったところで実際にログインを実装していきます。
なお、今回は例としてVue.js + Vuetifyのプロジェクトを使用します。
Login.vue
<template>
<v-card
class="pa-5 ma-auto"
width="50%"
>
<v-form
ref="loginForm"
>
<v-text-field
v-model="email"
label="Email"
:rules="requiredRule"
required
></v-text-field>
<v-text-field
v-model="password"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
label="Password"
:rules="requiredRule"
:type="showPassword ? 'text' : 'password'"
required
@click:append="showPassword = !showPassword"
></v-text-field>
<v-btn
@click="login"
>
ログイン
</v-btn>
</v-form>
</v-card>
</template>
<script>
import firebase from 'firebase';
export default {
name: 'Login',
data: () => ({
email: "",
password: "",
requiredRule: [
value => !!value || '必須項目です',
],
showPassword: false,
}),
methods: {
login() {
if (this.$refs.loginForm.validate()) {
firebase.auth().signInWithEmailAndPassword(this.email, this.password)
.then(res => {
alert('success')
console.log('success', res)
})
.catch(e => {
alert('error')
console.log('error', e)
})
} else {
console.log('validate error')
}
},
}
}
</script>
こちらで以下のような画面が生成されます。

実際にログインに使用する箇所は以下の1行です。
firebase.auth().signInWithEmailAndPassword(this.email, this.password)
signInWithEmailAndPasswordにユーザーネームとパスワードを渡してあげるだけでログインが実現できちゃいます!
ログインボタンをクリックした時に動作するlogin()メソッドでは、
signInWithEmailAndPasswordの成功の可否に応じて.thenや.catchでハンドリングします。
login() {
if (this.$refs.loginForm.validate()) {
firebase.auth().signInWithEmailAndPassword(this.email, this.password)
.then(res => {
// ログイン成功の処理
alert('success')
console.log('success', res)
})
.catch(e => {
// ログイン失敗の処理
alert('error')
console.log('error', e)
})
} else {
console.log('validate error')
}
}
また、firebaseに接続する設定として
- .env(or env.local)
- main.js
に設定を追記します。
.env
VUE_APP_FIREBASE_API_KEY=<API KEY>
VUE_APP_FIREBASE_AUTH_DOMAIN=<AUTH DOMAIN>
※環境変数は接頭辞にVUE_APP_をつけないと環境変数として認識されないようです。
main.js
~~~略~~~
import firebase from 'firebase';
~~~略~~~
const firebaseAuthConfig = {
apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN
}
firebase.initializeApp(firebaseAuthConfig);
これでプログラムの実装は完了です。
テストユーザーをfirebaseに登録する
今回はSignUpを実装せずに手っ取り早くfirebaseにユーザーを作成します。
ユーザーの追加は、
Authentication > Users > ユーザーを追加
から可能です。
ログインしてみる
実際に作成したユーザーでログインしてみます。
以下のようにダイアログが出れば成功です!


こんなに簡単にログインが実装できてしまった!
最後に
いかがだったでしょうか?
ログイン周りの実装は特に難しいことをすることもなく、
firebaseに任せることで簡単にログイン機能を完成させることができました!
皆さんもアプリを作成する時にFirebase authenticationを使ってみてはいかがでしょうか?
参考リンク
Firebase Authentication(Google公式)
ウェブサイトで Firebase Authentication を使ってみる(Google公式)
Vue.js+Firebase Authenticationで認証画面を爆速実装!
Firebase関連おすすめ書籍
改訂新版 Vue.jsとFirebaseで作るミニWebサービス
その他
ブログランキングに参加しています\(^^)/よろしければ下のボタンをポチッとしていただけると嬉しいです。

にほんブログ村
コメント