io17で発表されたFirebaseのphone number authをwebで試してみた

(2017-05-17)

今日のdeveloper keynoteで発表されたphone number authを試してみた。 Firebaseだと他にはPerformance Monitoringも発表されている。 あとSDKをオープンソースにするとか。

firebase-toolsを最新版にする。

# npm install -g firebase-tools
$ firebase -V
3.9.0

FirebaseUIを使う場合、これも最新版にしないと出てこない。

<script src="https://cdn.firebase.com/libs/firebaseui/2.0.0/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.0.0/firebaseui.css" />

firebase.auth.PhoneAuthProvider.PROVIDER_IDがphone number authの オプション

const uiConfig = {
    signInOptions: [
        firebase.auth.PhoneAuthProvider.PROVIDER_ID
    ],
    ...
}

const ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', uiConfig);

こんなボタンを押すと

ボタン

電話番号とCAPTCHAが入り、

電話番号とCAPTCHA

SMSに書かれた番号を入力すると認証される。

番号入力

二段階認証のようなものだと思っていたけど、そうではないみたい。