【Firebase】firebase authでいまいち理解できていなかった認証周りを再確認する(2)

研究
icon0.com at Pexels
この記事は約11分で読めます。

拙稿の続き。

問題はこの後。ログイン済のアカウントが自身の個人情報をアップデートする場合にアカウントの再認証が求められるのだそうです。

この辺を対応します。なお利用するソースコードはこちら。
document.getElementByID()の記述を、長ぇよ!と思いw
jQueryの$(‘#{ID名称}’)の記述が気に入っていたので、自身で作ったfunctionがあります。

まずニックネームの変更。

ここは容易いです。

なお該当箇所のソースコード。

            <form id='update_form'>
              <h2>プロフィール更新</h2>
              <div class="form-group">
                <input type="text" class="form-control col-4" id='update_displayName' placeholder='ニックネーム...'/>
              </div>
              <div class="form-group">
                <button class="btn btn-primary" type='submit'>反映</button>
              </div>
            </form>
document.querySelector("#update_form").addEventListener("submit", function(event) {
  var user = firebase.auth().currentUser;

  user.updateProfile({
    displayName : getElementValue('update_displayName')
  }).then(function() {
    alert('ニックネームを変更しました。');
    location.reload();
  }).catch(function(error) {
    var errorCode = error.code;
    var errorMessage = error.message;
    alert(errorCode + ', ' + errorMessage);
  });
  event.preventDefault();
}, false);

引き続きメールアドレスの変更の実装を行います。
こちらはログイン情報に直結するので認証が厳重みたいです…

            <form id='update_mailaddress_form'>
              <h2>メールアドレス変更</h2>
              <div class="form-group">
                <input type="email" class="form-control col-4" id='update_email' placeholder='新しいメールアドレス...'/>
              </div>
              <div class="form-group">
                <button class="btn btn-primary" type='submit'>反映</button>
              </div>
            </form>
document.querySelector("#update_mailaddress_form").addEventListener("submit", function(event) {
  var user = firebase.auth().currentUser;

  user.updateEmail(getElementValue('update_email')).then(function() {
    alert('メールアドレスを変更しました。');
    location.reload();
  }).catch(function(error) {
    var errorCode = error.code;
    var errorMessage = error.message;
    alert(errorCode + ', ' + errorMessage);
  });
  event.preventDefault();
}, false);
auth/requires-recent-login, This operation is sensitive and requires recent authentication. Log in again before retrying this request.

そうそう、こういう叱られ方するんです。

Manage Users in Firebase

You create a new user in your Firebase project by calling the createUserWithEmailAndPassword method or by signing in a user for the first time using a federated identity provider, such as Google Sign-In or Facebook Login. You can also create new password-authenticated users from the Authentication section of the Firebase console, on the Users page, or by using the Admin SDK.

firebase authではユーザーの再認証を求められるので、そちらが取れているか確認します。

document.querySelector("#update_mailaddress_form").addEventListener("submit", function(event) {

  var user = firebase.auth().currentUser;
  var credential;

  // Prompt the user to re-provide their sign-in credentials

  user.reauthenticateWithCredential(credential).then(function() {
    // User re-authenticated.
    alert('ok');
  }).catch(function(error) {
    var errorCode = error.code;
    var errorMessage = error.message;
    alert(errorCode + ', ' + errorMessage);
  });

  event.preventDefault();
}, false);

上記ソースで走らせたら「auth/argument-error」「reauthenticateWithCredential failed: First argument “credential” must be a valid credential.」と叱られました。

こうして…

            <form id='update_mailaddress_form'>
              <h2>メールアドレス変更</h2>
              <div class="form-group">
                <input type="email" class="form-control col-4" id='update_now_email' placeholder='現在のメールアドレス...'/>
              </div>
              <div class="form-group">
                <input type="email" class="form-control col-4" id='update_new_email' placeholder='新しいメールアドレス...'/>
              </div>
              <div class="form-group">
                <input type="password" class="form-control col-4" id='update_email_password' placeholder='パスワード...'/>
              </div>
              <div class="form-group">
                <button class="btn btn-primary" type='submit'>反映</button>
              </div>
            </form>
document.querySelector("#update_mailaddress_form").addEventListener("submit", function(event) {
  
  var user = firebase.auth().currentUser;
  var credential = firebase.auth.EmailAuthProvider.credential(
    getElementValue('update_now_email'),
    getElementValue('update_email_password')
  );

  user.reauthenticateWithCredential(credential).then(function() {
    // User re-authenticated.
    alert('ok');
  }).catch(function(error) {
    var errorCode = error.code;
    var errorMessage = error.message;
    alert(errorCode + ', ' + errorMessage);
  });

  event.preventDefault();
}, false);

こうして…OKがもらえた。ならば完遂させてみる。
さっき避けていたupdateEmailを戻してきて、反映。

document.querySelector("#update_mailaddress_form").addEventListener("submit", function(event) {

  var user = firebase.auth().currentUser;
  var credential = firebase.auth.EmailAuthProvider.credential(
    getElementValue('update_now_email'),
    getElementValue('update_email_password')
  );

  user.reauthenticateWithCredential(credential).then(function() {
    // User re-authenticated.
    user.updateEmail(getElementValue('update_new_email')).then(function() {
      alert('メールアドレスを変更しました。');
      location.reload();
    }).catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;
      alert(errorCode + ', ' + errorMessage);
    });

  }).catch(function(error) {
    var errorCode = error.code;
    var errorMessage = error.message;
    alert(errorCode + ', ' + errorMessage);
  });

  event.preventDefault();
}, false);

よし通った。現在のメールアドレスはuserから取ればいいから削除。
同様にパスワードの変更、アカウント削除を実装します。
バリデートはそのうち実装します。
なおプロフィール画像のアップロードはFirebase Strageを使おうと思うので、次の項目に回します。

コメント

タイトルとURLをコピーしました