Can I use sha256 function in Ionic?


#1

I am wondering if I could use sha256 in Ionic 2.

I found a npm module : https://www.npmjs.com/package/sha256
But, I don’t know how to use it in ionic 2… :frowning:

I found a thread related to md5 in this site: Ionic md5 hash
Like md5, I believe that I could use sha256 in ionic 2

Thanks in advance.


#2

It looks like the library is actually deprecated.

I’ve found another library that implements sha-256,

https://www.npmjs.com/package/jssha

npm install jssha --save
npm install @types/jssha --save-dev
import { Component } from '@angular/core';
import jsSHA from 'jssha'
import { NavController } from 'ionic-angular';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {
    let shaObj = new jsSHA("SHA-256", "TEXT");
    shaObj.update("This is a test");
    let hash = shaObj.getHash("HEX");
    console.log(hash)
  }
}

#3

You can use the WebCrypto API to do this, like so.


#4

Wow. I really appreciate your help.
But, I found another solution after posting this thread.
I am using CryptoJS now.

I got to know the below code is very important to use some libraries in ionic 2. (I am a newbie)

npm install @types/crypto-js --save-dev

Your answer also includes @types, so i think your code may work well.
I appreciate your detail explanations again.


#5

Hi, I am trying to use crypto-js as well for my hash function and AES function.
Would you please share your experience on how to use it?
I installed successfully the crypto-js library with npm command.
But once I include the following statement into the soure code, the application stop working.
let referenceVal = CryptoJS.SHA256(“dsfsdfjksjfsdf”);

Thanks a lot


#6

Why don’t you want to use WebCrypto?


#7

Well, actually I don’t have any preference. It happens that I spent the effort on CryptoJS, therefore, I want to work it out.

Btw, would you mind to share more information on WebCrypto with me? Appreciate a lot.


#8

a specific example for SHA-256, general digest documentation, and overall MDN docs. You probably do not want to be doing AES directly; key generation is tricky. Instead look at JOSE and I specifically recommend (yes, I’m biased as a contributor) Square’s js-jose library. I know it works with Ionic 2.


#9

I have cryptojs working, you don’t need to install any special typings, the newer versions have it already.

npm install crypto-js --save

In my package.json it lists like this: “crypto-js”: “^3.1.8”,

In the page/component you want to use it

import CryptoJS from 'crypto-js';

and then use it

let hash = CryptoJS.SHA256(data).toString(CryptoJS.enc.Hex);

#10

Hi Sir,
Thanks a lot for your sharing.
Actually I did try this approach before. However, ionic complains the CrypoJS is not found as a member.
May I know if I missed any steps?
Thanks a lot and looking forward to your reply.


#11

Thank you @rapropos.
I really appreciate a lot at your suggestion.
Let me try crypto-js again. Have a great day :grin:


#12

I don’t think is necessary to install any external component.
At least in Ionic 3 y found a Sha library already installed.

I used it like this:

import Sha from ‘sha.js’;

let s = Sha(“sha1”);
let p = s.update(‘abc’, ‘utf8’).digest(‘hex’);


#13

Great code example. Assured I can spend at least 2 hours on more usefull things then trying to figure out how this is done.


#14

Why can’t you use the standard WebCrypto instead of installing an external library?


#15

My attention span to read the api was limited to 1 minute. I wasnt convinced I was better off. It isn’t more complicated then that. I had to move on coding.

I will add 15 minutes to the balance to look into it a bit more. :grinning:


#16

The link in my first post in this thread goes straight to a SHA-256 example that you should be able to adapt within that 15 minutes with time to spare. One gotcha when dealing with WebCrypto, however, is that its Promises are not zone-aware, so you need to wrap them inside Promise.resolve() once in order to get them in the right zone.


#17

Hi mhartington,

I’ve followed your guide and its working on my local machine. But when I git push ionic master, the build processes failed with the error below. Can you please help me with this.

Error: ./src/pages/login/login.ts Module not found: Error: Can’t resolve ‘jssha’ in
’/usr/src/app/src/pages/login’ resolve ‘jssha’ in ‘/usr/src/app/src/pages/login’ Parsed request is a module
using description file: /usr/src/app/package.json (relative path: ./src/pages/login) Field ‘browser’ doesn’t
contain a valid alias configuration after using description file: /usr/src/app/package.json (relative path:
./src/pages/login) resolve as module looking for modules in /usr/src/app/node_modules using description
file: /usr/src/app/package.json (relative path: ./node_modules) Field ‘browser’ doesn’t contain a valid
alias configuration after using description file: /usr/src/app/package.json (relative path: ./node_modules)
using description file: /usr/src/app/package.json (relative path: ./node_modules/jssha) no extension Field
’browser’ doesn’t contain a valid alias configuration /usr/src/app/node_modules/jssha doesn’t exist .ts
Field ‘browser’ doesn’t contain a valid alias configuration /usr/src/app/node_modules/jssha.ts doesn’t exist
.js Field ‘browser’ doesn’t contain a valid alias configuration /usr/src/app/node_modules/jssha.js doesn’t
exist .json Field ‘browser’ doesn’t contain a valid alias configuration /usr/src/app/node_modules/jssha.json
doesn’t exist as directory /usr/src/app/node_modules/jssha doesn’t exist [/usr/src/app/node_modules/jssha]
[/usr/src/app/node_modules/jssha.ts] [/usr/src/app/node_modules/jssha.js]
[/usr/src/app/node_modules/jssha.json] [/usr/src/app/node_modules/jssha] @ ./src/pages/login/login.ts
13:0-26 @ ./src/pages/login/login.module.ts @ ./src lazy @
./node_modules/ionic-angular/util/ng-module-loader.js @ ./node_modules/ionic-angular/util/module-loader.js @
./node_modules/ionic-angular/components/popover/popover-component.js @ ./node_modules/ionic-angular/index.js
@ ./src/app/app.module.ts @ ./src/app/main.ts
Error: ./src/pages/login/login.ts
Module not found: Error: Can’t resolve ‘jssha’ in '/usr/src/app/src/pages/login’
resolve ‘jssha’ in '/usr/src/app/src/pages/login’
Parsed request is a module
using description file: /usr/src/app/package.json (relative path: ./src/pages/login)
Field ‘browser’ doesn’t contain a valid alias configuration
after using description file: /usr/src/app/package.json (relative path: ./src/pages/login)
resolve as module
looking for modules in /usr/src/app/node_modules
using description file: /usr/src/app/package.json (relative path: ./node_modules)
Field ‘browser’ doesn’t contain a valid alias configuration
after using description file: /usr/src/app/package.json (relative path: ./node_modules)
using description file: /usr/src/app/package.json (relative path: ./node_modules/jssha)
no extension
Field ‘browser’ doesn’t contain a valid alias configuration
/usr/src/app/node_modules/jssha doesn’t exist
.ts
Field ‘browser’ doesn’t contain a valid alias configuration
/usr/src/app/node_modules/jssha.ts doesn’t exist
.js
Field ‘browser’ doesn’t contain a valid alias configuration
/usr/src/app/node_modules/jssha.js doesn’t exist
.json
Field ‘browser’ doesn’t contain a valid alias configuration
/usr/src/app/node_modules/jssha.json doesn’t exist
as directory
/usr/src/app/node_modules/jssha doesn’t exist


#18

Hello is https://www.npmjs.com/package/jssha still working in latest ionic version. Please let me know, I would like to implement this in mine project.

cli packages: (C:\Users\metalhead101\AppData\Roaming\npm\node_modules)

@ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:

cordova (Cordova CLI) : 7.1.0
local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms : android 6.3.0
Ionic Framework : ionic-angular 3.9.2
System:

Node : v6.11.3
npm : 3.10.10
OS : Windows 10
Environment Variables:

ANDROID_HOME : not set
Misc:

backend : pro


#19

@metalhead101

See:


#20

Hello @rapropos,

I tried to use WebCrypto, but a user in China is getting a “Cryptography API not supported” error in an iOs build. To your knowledge, are you aware of any restrictions of the WebCrypto API?

Thank you.