NIFCLOUD-mbaas / UserCommunity

ニフクラ mobile backend ユーザーコミュニティ
https://mbaas.nifcloud.com/
81 stars 18 forks source link

メールアドレスでのログインができない #1351

Closed littleflower417 closed 1 year ago

littleflower417 commented 1 year ago

サンプル【アプリに会員認証機能を導入しよう!】をOnsen UIとjqueryを使用しない形に修正して、メールアドレス認証機能を実装しようとしています。 新規登録はうまくいくのですが、ログインメソッドがエラーも出ず全く動いていないように思えます。 全くの初心者で申し訳ないのですが、ご教示お願いいたします。

【ncmb.js】

var applicationKey = 'KEY';
var clientKey = 'KEY';

var ncmb = new NCMB(applicationKey, clientKey);
mb = {
    /***** Email/PW認証:新規登録 *****/
    signupByEmail: function(mailAddress) { 
        // 設定したEmailに会員登録メールを送信
        ncmb.User.requestSignUpEmail(mailAddress)
                 .then(function(user){
                     /* 処理成功 */
                    alert('届いたメールに記載されているURLにアクセスし、パスワードを登録してください。'); 
                    clearField();
                 })
                 .catch(function(error){
                     /* 処理失敗 */
                     userError('【Email/PW認証】新規登録メールの配信に失敗しました:', error);
                 });
    },
    /***** Email/PW認証:ログイン *****/
    signinByEmail: function(mailAddress, password) { 
        // Email/PWでログイン
        ncmb.User.loginWithMailAddress(mailAddress, password)
                 .then(function(user) {
                     /* 処理成功 */
                     userSuccess('【Email/PW認証】ログイン成功:', user);
                 })
                 .catch(function(error) {
                     /* 処理失敗 */
                     userError('【Email/PW認証】ログイン失敗:' + error);
                 });
    },
};

【index.js】

/********** メールアドレス / PW 認証 **********/
// 「Sing up」ボタン押下時の処理
function onSignupByEmailBtn() {
    var mailAddress = document.querySelector('#singupEmailAddress').value;
    if(mailAddress == '') {
        alert('メールアドレスが入力されていません');
    } else {
        mb.signupByEmail(mailAddress);
    }
}

// 「Sing in」ボタン押下時の処理
function onSigninByEmailBtn() {
    var mailAddress = document.querySelector('#singinEmailAddress').value;
    var password = document.querySelector('#singinEmailAddressPW').value;
    if(mailAddress == '' || password == '') {
        alert('入力されていない項目があります');
    } else {
        mb.signinByEmail(mailAddress, password);
    }
}

【index.html】

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>

  <script src="index.js"></script>
  <script src="backend/ncmb.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
  </script>
</head>
<body>
    <p style="text-align: center;">
        <input type="email" id="singupEmailAddress" modifier="underbar" placeholder="Email address" float><br>
        <p style="text-align: center;">
            <button onclick="onSignupByEmailBtn();">Sign up</button>
        </p>
    </p>

    <p style="text-align: center;">
        <input type="email" id="singinEmailAddress" modifier="underbar" placeholder="Email address" float><br>
        <input type="password" id="singinEmailAddressPW" modifier="underbar" placeholder="Password" float><br>
        <p style="text-align: center;">
            <button onclick="onSigninByEmailBtn();">Sign in</button>
        </p>
    </p>
</body>
</html>
goofmint commented 1 year ago

長いコードを出されても分からないので、どの部分でエラーが出ているのか特定してください。alertやconsole.logをうまく使ってください。

うまくいっていない時には、ごく小さなコードを書いて試してみることをお勧めします。

littleflower417 commented 1 year ago

ありがとうございます! alertを使って解決することが出来ました!