signInWithCustomToken()メソッド使い方を教えてください。

##聞きたいこと

firebaseで登録フォームを作っております。
現在、mail&pass認証はできるようになりました。
その際に、名前や電話番号などでも認証を行いたいです。
signInWithCustomToken()メソッド使い方を教えてください。

##現在のコード

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset=utf-8 />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>firebase</title>
7    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
8    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
9  </head>
10
11  <body>
12    <div class="container" style="padding:20px 0">
13      <h2>User登録用フォーム</h2><hr />
14      <form class="form-horizontal" data-toggle="validator" role="form" style="">
15
16        <!-- メールアドレス -->
17        <div class="form-group has-feedback">
18          <label class="col-form-label col-sm-2">
19            <span class="label label-danger">必須</span>　メールアドレス
20          </label>
21          <div class="col-sm-8">
22            <input id="userEmail" class="form-control" type="email" placeholder="email" required></input>
23            <div class="help-block with-errors"></div>
24          </div>
25        </div>
26
27        <!-- パスワード -->
28        <div class="form-group has-feedback">
29          <label class="col-form-label col-sm-2">
30            <span class="label label-danger">必須</span>　パスワード
31          </label>
32          <div class="col-sm-3">
33            <input id="userPassword" class="form-control" type="password" placeholder="password" required></input>
34            <div class="help-block with-errors"></div>
35          </div>
36        </div>
37
38        <!-- 名前 -->
39        <div class="form-group has-feedback">
40          <label class="col-form-label col-sm-2">
41            <span class="label label-danger">必須</span>　姓
42          </label>
43          <div class="col-sm-3">
44            <input type="text" id="lastname" class="form-control" placeholder="" required>
45            <div class="help-block with-errors"></div>
46          </div>
47          <label class="col-form-label col-sm-2" for="firstname">
48            <span class="label label-danger">必須</span>　名
49          </label>
50          <div class="col-sm-3">
51            <input type="text" id="firstname" class="form-control" placeholder="" required>
52            <div class="help-block with-errors"></div>
53          </div>
54        </div>
55
56        <!-- 電話番号 -->
57        <div class="form-group has-feedback">
58          <label class="col-form-label col-sm-2">
59            <span class="label label-danger">必須</span>　電話番号
60          </label>
61          <div class="col-sm-3">
62            <input id="userPhoneNumber" class="form-control" type="number" placeholder="phone number" required></input>
63            <div class="help-block with-errors"></div>
64          </div>
65        </div>
66
67        <!-- ボタン -->
68        <div class="form-group row">
69            <label class="col-form-label col-sm-2"></label>
70            <button id="btnLogin" type="button" class="btn btn-primary">
71              Log in
72            </button>
73
74            <button id="btnSignUp" type="button" class="btn btn-light">
75              Sign Up
76            </button>
77
78            <button id="btnLogout" type="button" class="btn btn-primary hide">
79              Log out
80            </button>
81        </div>
82      </form>
83    </div>
84    <!-- Firebase -->
85    <script src="https://www.gstatic.com/firebasejs/4.0.0/firebase.js"></script>
86    <script src="app.js"></script>
87    <script src="/__/firebase/4.0.0/firebase-app.js"></script>
88    <script src="/__/firebase/4.0.0/firebase-auth.js"></script>
89    <script src="/__/firebase/init.js"></script>
90
91  </body>
92</html>
93

js
1(function(){
2  // Initialize Firebase
3  const config = {
4    apiKey: "XXX",
5    authDomain: "XXX",
6    databaseURL: "XXX",
7    projectId: "XXX",
8    storageBucket: "XXX",
9    messagingSenderId: "XXX"
10  };
11
12  // Initialize the default app
13  var defaultApp = firebase.initializeApp(config);
14
15  console.log(defaultApp.name);  // "[DEFAULT]"
16
17  // You can retrieve services via the defaultApp variable...
18  var defaultStorage = defaultApp.storage();
19  var defaultDatabase = defaultApp.database();
20
21  // ... or you can use the equivalent shorthand notation
22  defaultStorage = firebase.storage();
23  defaultDatabase = firebase.database();
24
25  // Get Elements
26  const userEmail = document.getElementById('userEmail');
27  const userPassword = document.getElementById('userPassword');
28  const btnLogin = document.getElementById('btnLogin');
29  const btnSignUp = document.getElementById('btnSignUp');
30  const btnLogput = document.getElementById('btnLogput');
31
32  // Add login event
33  btnLogin.addEventListener('click', e => {
34    // Get Email and Pass
35    const email = userEmail.value;
36    const password = userPassword.value;
37    const auth = firebase.auth();
38    // Sign In
39    const promise = auth.signInWithEmailAndPassword(email, password);
40    promise.catch(e => {
41        // Handle Errors here.
42        var errorCode = e.code;
43        var errorMessage = e.message;
44        // [START_EXCLUDE]
45        if (errorCode === 'auth/wrong-password') {
46          alert("パスワードが違います");
47        } else {
48          alert(errorMessage);
49        }
50        console.log(e.message);
51      });
52      alert("ログインに成功しました");
53    });
54
55  // Add Signup event
56  btnSignUp.addEventListener('click', e =>{
57    // Get Email and Pass
58    const email = userEmail.value;
59    const password = userPassword.value;
60    const auth = firebase.auth();
61    // Sign In
62    const promise = auth.createUserWithEmailAndPassword(email, password);
63    promise.catch(e => {
64        // Handle Errors here.
65        var errorCode = e.code;
66        var errorMessage = e.message;
67        // [START_EXCLUDE]
68        if (errorCode == 'auth/weak-password') {
69          alert("パスワードは６文字以上である必要があります");
70        } else {
71          alert(errorMessage);
72        }
73        console.log(e.message);
74        // [END_EXCLUDE]
75      });
76    alert("ユーザー登録に成功しました");
77  });
78
79  // logout
80  btnLogout.addEventListener('click', e => {
81    firebase.auth().signOut();
82    alert("ログアウトしました");
83  })
84
85  // Add a realtime listener
86  firebase.auth().onAuthStateChanged(firebaseUser => {
87    if(firebaseUser){
88      firebaseUser.getIdToken().then(function(data){
89          console.log(data)
90        });
91      btnLogout.classList.remove('hide');
92    }else{
93      console.log("ログインしてない");
94      btnLogout.classList.add('hide');
95    }
96  })
97
98}());
99

##参考資料
JavaScript でカスタム認証システムを使用して Firebase 認証を行う | Firebase
カスタムトークンを生成する | Firebase

Yatima

2017/10/30 12:23

「名前や電話番号などでも認証を行いたいです」とはメールアドレスの代わりに名前など使ってログインさせたいということですか？

good_island

2017/11/01 08:49

ログインはメールアドレスとパスワードで良いのですが、そこにユーザー情報を付与したいという認識です。

行動規範の内容に同意します

回答1件

ベストアンサー

Firebase Authenticationでは、ユーザ情報を追加することはできません。
Realtime DatabaseやFirestoreといったデータベース機能を利用して保存してください。

名前や電話番号での認証，については，
まず入力された情報を元にデータベース照会して，紐付いたメールアドレスを割り出し，そこからsignInWithEmailAndPassword()を使うのが良いかと思います．

投稿2017/11/01 09:46

編集2017/11/01 12:17

Yatima

総合スコア1159