質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

HTMLでログイン画面を作っているのですが、ログインに失敗してしまいます。コンソールにエラーメッセージを表示させたいです。

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 6,773

Tan3

score 39

youtubeのチュートリアルを参考にワンタップゲームを作っています。
ログイン画面を作るところでつまずいています。
ログインに失敗というアラートがでてしまいます。
アプリを作るのは初めてなので右も左もわかりません。
ご教授お願いいたします。

(アプリキーとクライアントキーは偽です。)

発生している問題

  1. ログイン画面はできたのですが、ログインに失敗してしまう。
    2.コンソールにエラーメッセージを表示させたい。
    console.error("表示テスト");は何行目に入れたらよろしいでしょうか?

問題の発生している環境

HTML5
iMac(10.11.2)
Chrome(48.0.2564.116 (64-bit))

<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:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="components/loader.js"></script>
    <script src="js/ncmb-2.0.0.min.js"></script>
    <script>

        $(function(){
            //mBaaSの初期化
            var application_key = "0c266079f782bc9dcd58139798337ba17ea41f09077ae93f621541c4ccf20000";
            var client_key = "c6937216c6a4aecfc9a066e42a746bb58520133c9f0a79e5e1e7949177be0000";
            var ncmb = new NCMB(application_key, client_key);

            //ログイン・新規処理
            $("form").on("submit", function() {
                var username = $("#username").val();
                var password = $("#password").val();


                // ユーザー名とパスワードでログイン
                ncmb.User.login("username", "password")
                .then(function(data) {
                    // ログイン後処理
                    alert("ログイン成功");
                })
                .catch(function(err) {
                    // エラー処理
                    var user = new  ncmb.User({
                       userName: username,
                       password: password
                    });
                    //新規登録
                    user.signUpByAccount()
                    .then(function() {
                        //ログイン
                        ncmb.User.login("username", "password")
                        .then(function(data) {
                            // ログイン成功
                            alert("新規登録&ログイン成功");
                        });
                    });
                });        
            });
        });        
    </script>
    <style>
        body{
            background-color: #BBDEFB;
            padding-top: 20px;
            font-family: Verdana, sans-serif;
        }
        form{
            padding: 30px auto;
            text-align: center;
        }
        input{
            border-radius:  5px;
            padding: 7px;
            margin-bottom: 10px;
            width: 200px;
            font-size: 20px;
        }
    </style>
</head>
<body>

    <form>
    <input type="text" id="username" placeholder="User name" />
    <input type="password" id="password" placeholder="Password" />
    <input type="submit" value="Register/Login"  />
</form>
</body>
</html>


コンソール

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • maisumakun

    2016/02/24 11:29

    シークレットキーを書いてしまっていますが、本当の値ではないですよね?(もし本物なら、今すぐにキーを作り変えておくことをおすすめします)

    キャンセル

  • Tan3

    2016/02/24 11:46

    再生成しました。ありがとうございました。

    キャンセル

回答 4

checkベストアンサー

+2

これで上手くいくみたいでした。

こういうjavascriptの問題では、catch句の中で
alert(err);
を実行したときのエラーメッセージも記載しておくと、回答しやすくなると思います

<!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:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="components/loader.js"></script>
    <script src="js/ncmb-2.0.0.min.js"></script>
    <script>

        $(function(){
            //mBaaSの初期化
            var application_key = "アプリケーションキー";
            var client_key = "クライアントキー";
            var ncmb = new NCMB(application_key, client_key);
            //ログイン・新規処理
            $("form").on("submit", function() {
                var username = $("#username").val();
                var password = $("#password").val();
                alert(username);


                // ユーザー名とパスワードでログインここがちがう
                ncmb.User.login(username, password)
                  .then(function(data) {
                      // ログイン後処理
                      alert("ログイン成功");
                  })
                  .catch(function(err) {
                      //ログイン失敗
                      var user = new ncmb.User({
                          userName:username,
                          password:password
                      });
                      //新規登録
                      user.signUpByAccount()
                      .then(function(){
                          // ログイン
                          ncmb.User.login(username,password)
                          .then(function(){
                              //ログイン成功
                              alert("新規登録&ログイン成功");
                          });
                      });

                  });
                return false;
            });      // セミコロンなかったよ
        });          // この行なかったよ


    </script>
    <style>
        body{
            background-color: #BBDEFB;
            padding-top: 20px;
            font-family: Verdana, sans-serif;
        }
        form{
            padding: 30px auto;
            text-align: center;
        }
        input{
            border-radius:  5px;
            padding: 7px;
            margin-bottom: 10px;
            width: 200px;
            font-size: 20px;
        }
    </style>
</head>
<body>

    <form>
    <input type="text" id="username" placeholder="User name" />
    <input type="password" id="password" placeholder="Password" />
    <input type="submit" value="Register/Login"  />
</form>

</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/03 16:48

    pencilさん

    丁寧にソースに解説を書いてくださってありがとうございます。

    すみません、

    >こういうjavascriptの問題では、catch句の中で
    alert(err);
    を実行したときのエラーメッセージも記載しておくと、回答しやすくなると思います

    が、よくわかりません・・・。

    ともあれ、解決してほっとしました。
    ありがとうございました。

    キャンセル

+2

まずはコンソールでエラーを確認してみましょう。エラーが出ています。

40行目.then(funtion() {
                    //ログイン成功
function
ncmb.User,login
ncmb.User.login
$(function(){
を閉じる})がない

などがでてきます

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/02/24 12:30

    回答ありがとうございます。
    すみません。コンソールにエラーが表示されません・・・なにか私のやり方がまちがっているのでしょうか?

    キャンセル

  • 2016/02/24 12:40 編集

    _

    キャンセル

  • 2016/02/24 17:57

    id="pasword"
    がid="password"
    になっていないですね

    キャンセル

  • 2016/02/24 18:35

    dateさん

    ありがとうございます。
    ご指摘の箇所を修正しました。

    ですが、まだalertが動作しません。
    たびたびすみません。

    キャンセル

+2

ncmb.User,login(username, password)

じゃなく

ncmb.User.login(username, password)

ではないですか?
(ncmb.Userのloginメソッドを呼ぶ?)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/02/24 17:57

    hato_patoさん 
    ありがとうございます。

    シンプルにしました。見やすくなりました。

    ですが、alertが動作しません・・・


    やりたいことは、まさにそれです。

    たびたびすみません。

    キャンセル

  • 2016/02/24 18:35

    dateさんのコメントの通り、passwordのスペルミスが原因じゃ。。。

    キャンセル

  • 2016/02/24 18:39

    かっこ足りないかな??
    別回答でソース貼りますね

    キャンセル

+1

<!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:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="components/loader.js"></script>
    <script src="js/ncmb-2.0.0.min.js"></script>
    <script>

        $(function(){
            //mBaaSの初期化
            var application_key = "0c266079f782bc9dcd58139798337ba17ea41f09077ae93f621541c4ccf22000";
            var client_key = "c6937216c6a4aecfc9a066e42a746bb58520133c9f0a79e5e1e7949177be0000";
            var ncmb = new NCMB(application_key, client_key);
            //ログイン・新規処理
            $("form").on("submit", function() {
                var username = $("#username").val();
                var password = $("#password").val();


                // ユーザー名とパスワードでログイン
                ncmb.User.login("username", "password")
                  .then(function(data) {
                      // ログイン後処理
                      alert("ログイン成功");
                  })
                  .catch(function(err) {
                      // エラー処理
                      alert("ログイン失敗");
                  });
            });      // セミコロンなかったよ
        });          // この行なかったよ


    </script>
    <style>
        body{
            background-color: #BBDEFB;
            padding-top: 20px;
            font-family: Verdana, sans-serif;
        }
        form{
            padding: 30px auto;
            text-align: center;
        }
        input{
            border-radius:  5px;
            padding: 7px;
            margin-bottom: 10px;
            width: 200px;
            font-size: 20px;
        }
    </style>
</head>
<body>

    <form>
    <input type="text" id="username" placeholder="User name" />
    <input type="password" id="password" placeholder="Password" />
    <input type="submit" value="Register/Login"  />
</form>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/02/25 10:17 編集

    ログインしたいユーザは、ニフティ側に登録されていますか?という意味です。

    ユーザ登録されていないなら、ログイン失敗して当然ですよね。

    キャンセル

  • 2016/03/03 16:50

    hato_patoさん

    ユーザー登録と、ログインを同時に行いたかったのですが、うまくいっていませんでした。

    何度も回答ありがとうございます。

    キャンセル

  • 2016/03/03 17:39

    すみません、最初のソースをシンプルにした時に見落としました。

    あと、ユーザー登録に失敗するケースにも対応させておくと良いと思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • JavaScriptに関する質問
  • HTMLでログイン画面を作っているのですが、ログインに失敗してしまいます。コンソールにエラーメッセージを表示させたいです。