FireBase 認証機能
FireBase 認証のまとめ
FireBase では、Google,Twitter,Github などの認証が簡単にできる。
構築準備
FireBase の登録
FireBase の認証ファイルをどこかに作成
import firebase from 'firebase/app';
import "firebase/auth";
const firebaseConfig = {
apiKey: "********",
authDomain: "********",
databaseURL: "********",
projectId: "********",
storageBucket: "********",
messagingSenderId: "********",
appId: "********",
measurementId: "********"
};
firebase.initializeApp(firebaseConfig);
// Twitter認証
export const Twitter = new firebase.auth.TwitterAuthProvider();
// Google認証
export const Google = new firebase.auth.GoogleAuthProvider();
export default firebase;
react の作成ページ例
react-firebaseui ですが、使用すると UI を簡単に書けます。
import React, { PureComponent } from "react";
import firebase, { Google } from "./firebaseConfig";
import { css } from "emotion";
import FirebaseUI from "react-firebaseui/StyledFirebaseAuth";
export default class login extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {
userData: {},
};
this.onChange_email = this.onChange_email.bind(this);
this.onChange_password = this.onChange_password.bind(this);
// css in js
//お好みで
}
componentDidMount() {
firebase.auth().onAuthStateChanged((user) => {
this.setState({ ...this.state, userData: user });
});
}
render() {
return (
<div className={this.logincss}>
<label>
<input
type="text"
name="email"
placeholder="test@gmail.com"
onChange={(e) => this.onChange_email(e)}
/>
<br />
<input
type="password"
name="pass"
placeholder="パスワード"
onChange={(e) => this.onChange_password(e)}
/>
</label>
<br />
<button
className={this.buttoncss}
key="login_do"
onClick={(e) => {
this.login(e);
}}
>
ログイン
</button>
</div>
);
}
}
Google 認証
Google の認証ですが下記の設定をする必要があります
const Google = new firebase.auth.GoogleAuthProvider();
firebase の設定ファイルに書いてインポートしてください
※WEB の FireBase で Google 認証を有効にしていてください
Google 認証_Login
react
import firebase,{Google} From './firebaseConfig'
export default class login extends React.Component<any, any> {
// ~省略~
login() {
try {
firebase
.auth()
.signInWithPopup(Google)
.then((result) => {
this.setState({ ...this.state, userData: result });
});
} catch (error) {
alert(error);
}
}
これでリダイレクトで認証可能になるはずです。
## Google 認証_logOut
ログアウト方法です。
logout(){
firebase.auth().signOut()
}
上記の処理でログアウトできます。
Twitter 認証
Twitter のデベロッパーアカウントの登録が必要です。
他にも Github、Facebook などでもこのようにデベロッパーアカウントの登録情報を求められます。
Twitter の認証ですが下記の設定をする必要があります
const Twitter = new firebase.auth.TwitterAuthProvider();
firebase の設定ファイルに書いてインポートしてください
※WEB の FireBase で Twitter 認証を有効にしていてください
Twitter 認証_Login
react
import firebase,{Twitter} From './firebaseConfig'
export default class login extends React.Component<any, any> {
// ~省略~
login() {
try {
firebase
.auth()
.signInWithPopup(Twitter)
.then((result) => {
this.setState({ ...this.state, userData: result });
});
} catch (error) {
alert(error);
}
}
これでリダイレクトで認証可能になるはずです。
Twitter 認証_logOut
ログアウト方法です。
logout(){
firebase.auth().signOut()
}
上記の処理でログアウトできます。
メールアドレスでの認証
メールアドレスでの認証は、上記のより少し手順が増えます
- 本当にそのメールアドレスが有効なのかどうか?
- パスワードは、6 文字以上
- 他の認証(Google,Twitter)で登録されたメールアドレスは、この方法では、登録できない(2 重登録になってしまうので)
などがあげられます。
メールアドレスでの認証_sign_in
FireBase にメールアドレスとパスワードを登録します
react
// ~省略~
super(props);
this.state = {
email: "",
password: "",
userData: {},
};
}
async sign_in(e: any) {
e.preventDefault();
const { email, password } = this.state;
try {
await firebase
.auth()
.createUserWithEmailAndPassword(email, password)
.then(console.log("signin_ok"));
} catch (error) {
alert(error);
}
}
render() {
// ~省略~
}
FireBase を確認してみてください。メールアドレスが登録されているはずです。
この状態だとでたらめなメールアドレスでも登録できてしまいます。
メールアドレスでの認証_メールアドレス確認
メールアドレスが有効かどうかを調べるために確認メールを送信します。
確認方法としてデータが json 形式で渡されるので
user.emailVerified // 確認されてないと false の状態
// メール送信してくれる
firebase.auth().currentUser?.sendEmailVerification();
async sign_in(e: any) {
e.preventDefault();
const { email, password } = this.state;
try {
await firebase
.auth()
.createUserWithEmailAndPassword(email, password)
.then(this.send_mail);
} catch (error) {
alert(error);
}
}
// ======追記======
send_mail() {
firebase.auth().currentUser?.sendEmailVerification();
}
メールアドレスでの認証_login
ログインのやり方です。
async login(e: any) {
e.preventDefault();
const { email, password } = this.state;
try {
await firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then((data) =>
data.user?.emailVerified
? ""
: alert("メールアドレスの確認が済んでいません")
);
} catch (error) {
alert(error);
}
}
まとめ
認証について自身の知見をまとめました。
参考ページ
https://firebase.google.com/docs/auth/web/manage-users?hl=ja
https://blog.katsubemakito.net/firebase/firebase-authentication-email-web1