【react】js-sha512ライブラリを使って文字列をハッシュ化する

今回は、入力フォームでパスワードを簡単にハッシュ化できるjs-sha512ライブラリの使い方を書いていきたいと

思います。

ハッシュ化とは、適当な文字列をハッシュ関数によって文字列に応じた値を返すまでの一連の流れを指します。

このやり取りをjするのがs-sha512というライブラリになります。

インストール方法は、まずコマンドでnpm install js-sha512と入力。するとjs-sha512がディレクトリのフォルダ内に

インスールされるのでそれを先頭でimportします。

import sha512 from 'js-sha512';

このライブラリは、独自のアルゴリズムを使ってハッシュ化をしてくれます。少ないコードで済むように設計されているので初心者でも感覚的に触ることができてかなり覚えやすいです。

下のコードは、stateされているパスワードを引数にしてsha512で変換しています。

var password = ReactDOM.findDOMNode(this.refs.password).value.trim();

var hashPass = sha512(password)

これを実装した前提で画面を見ていきます。

適当に作った入力フォームです。ここにパスワードとメールアドレスを入れて送信します。

すると下のような数値が乱立した値がログで吐き出されているのが分かります。

これがハッシュ値です。アカウントを管理するアプリには、外部からの改ざんを防ぐための手段としてパスワードのハッシュ化が必

用いられます。

このようにして簡単で短いパスワードを長くランダムに変換することにより、外部から触れられないようにすると

いう訳です。

reactでハッシュ関数を使いたい場合はこのライブラリを使うことをおすすめします。