2017-09-07 8 views
1

私はできるだけ詳細にしようとしますが、私はJavascriptの機能に慣れていないので、痛いほど基本的な質問かもしれません。Javascriptでパスワードをハッシュすると、未定義の結果が返される

私はユーザー入力を取得し、ハッシュしてから投稿する必要があります。私は現在、MITのbCryptアルゴリズムを使用しています。特に使用する必要はありませんが、クライアント側でなければなりません。 (さておき、クライアントサイドのパスワードのようなハッシングは良い考えではないことを知っています。私はそれについて多くのことを読んでいます...しかし、これらの目的のためにはこれは単なる練習です)。

私は塩を生成することができます。そのため、bCrypt.jsファイルからその関数を正常に呼び出していますが、パスワードをハッシュする問題が発生しています。以前はパスワードハッシュを取得することができましたが、他の場所でその変数を正常に参照することはできませんでした。今私はそれをすべて混乱させたし、ハッシュを稼働させることさえできません、それは未定義に戻っています(これが私がバージョンコントロールを使用する習慣に入る必要がある理由です)。

マイコード:

var ROUNDS = 10; 
 

 
// \t Function grabs username and password from user's input 
 
// 
 
function submitButton() { 
 
    var userInput = document.getElementById('password').value; 
 
    var userName = document.getElementById('username').value; 
 

 
    hashPw(userInput, userName); 
 
} 
 

 
function result(hash) { 
 
    console.log('hash in callback is ' + hash); 
 
} 
 

 
function hashPw(old, name) { 
 
    console.log('hashPw called'); 
 
    console.log('old password= ' + old); 
 

 
    var salt = gensalt(ROUNDS); 
 
    hashpw(old, salt, result); 
 
    console.log('Salt= ' + salt) 
 
    console.log('hashed password='); 
 

 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Hash</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 
    <script src="bcrypt.js" type="text/javascript"></script> 
 

 
</head> 
 

 
<body> 
 
    <form> 
 
    <div class="form-group"> 
 
     <label>Username: </label> 
 
     <input type="text" id="username" class="form-control"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="password">Password: </label> 
 
     <input type="text" id="password" class="form-control"> 
 
     <span></span> 
 
    </div> 
 
    <button type="button" class="btn btn-primary" onClick="submitButton()">Submit</button> 
 
    </form> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
    <script src="callHash.js" type="text/javascript"></script> 
 
</body> 
 

 
</html>

マイJS:

そして、ここに投稿することはなく、長いのですが、これは私が使用していますbcryptのアルゴリズムです:https://github.com/nevins-b/javascript-bcrypt/blob/master/bCrypt.js

アン一貫してコンソール出力の例:

callHash.js:18 hashPw called 
callHash.js:19 old password= tryagain 
callHash.js:23 Salt= $2a$10$AwGCCKs5bXa1SNzdKLBytO 
callHash.js:24 hashed password=undefined 

EDIT-- これは私が関係なく、私が変えるものを、何度もなってないんだものです:任意のヘルプや提案のための

bcrypt.js:467 [Violation] 'setTimeout' handler took 102ms 

本当にありがとうございましたが、私はこれを研究してみましたし、ガイドのために来る前に多くのトラブルシューティングをして、私は何度も何度もやり直しました。

+0

' hashpw(旧、塩、結果)中 'result'は何ですか:ドキュメントをチェック詳細情報については

var bcrypt = require('bcryptjs'); bcrypt.genSalt(10, function(err, salt) { bcrypt.hash("B4c0/\/", salt, function(err, hash) { // Store hash in your password DB. }); }); 

: 私のようなもので二番目のウィッヒ結果を示唆していますか? – Thijs

+0

@Thijs: '関数の結果(ハッシュ){' – Cerbrus

+0

明らかに、コールバックは呼び出されません。 – Cerbrus

答えて

0

私はあなたがbcryptの非同期機能を使用していると仮定します。 同期関数(genSaltSyncとhashSync)を使用するか、コールバックについて少し読んでください。 ; `https://www.npmjs.com/package/bcryptjs

+0

すでに正しい方向に私を押していただきありがとうございます、私は非同期関連の問題にぶつかっていると思っていました。そして、私はコールバックに精通していないので、その点にスポットがあります。しかし、それはnodejs bcrypt関数のように見えます...?私は想定して以来、私はそれを使用できないと思っていた、それはnodejなので、それはサーバー側だろう。私は特にこれをクライアントサイドで実行するように求められています。収集しているのは最良の方法ではありません。 –

+0

フロントエンドでこれを使用したことはありませんが、使用しているライブラリに関係なくパターンは変わりません。おそらくあなたのlibararyが約束を返し、コールバックが.then()関数の中に置かれているかもしれません。 –

関連する問題