react native redux flow

1. user ใช้งาน APP จะถูกจัดการโดย View สมมติว่ามีการพิมข้อมูลลง Textbox เราสามารถเขียนให้จับ event เช่น TextInput onChange นำมา bind เป็น Action และส่งต่อไปให้ Dispatcher
2. Dispatcher -> fetch API (Promised) call back function เช่น เรียก youtube search API โดยขณะนั้นก็ส่ง Action ต่อไปให้ Reducer ด้วย และเมื่อไรที่ fetch API เสร็จเราก็จะได้ res มา bind เป็น Action อีกตัว
3. Reducer สร้าง state ใหม่ จาก state ปัจจุบันและ Action ทีได้รับ โดยไม่ทับ state เดิม จากรูปจะเห็นว่า state เปลี่ยน 2 ครั้ง (onChange) โดย state แรกอาจจะให้ทำหน้า splash หรือ loading และ  state ที่สองก็นำ resp จาก youtube search API มาแสดง
4. render view เฉพาะ state ที่เปลี่ยนแปลง

state จะเก็บอยู่ใน persist store (AsyncStorage) เก็บเป็น global scope เข้าถึงได้จากทั้ง app

Posted in ไม่มีหมวดหมู่ | Leave a comment

เริ่มต้นทำ React native installation on window

1.ดาวโหลดโปรแกรม genemotion โหลดพร้อม oracle virtualbox คือโปรแกรมจำลอง Emulator มือถือ เพื่อใช้ Develop และเทส โดยการจะดาวโหลดได้ต้องสมัครสมาชิกก่อน 2.ดาวโหลด Android Studio หรือโหลดแต่ android sdk lib ก็ได้เพื่อใช้งาน android lib sdk หลังจากนั้นให้เพิ่ม Environment Variables ของ Window (คลิกขวาที่ My Computer > Advanced system settings > Environment Variables) ในส่วนของ Users เพิ่ม Variable ANDROID_HOME และ Value ให้ใช้ path ที่ติดตั้ง android sdk lib ตัวอย่างเช่น C:\Users\your_user\AppData\Local\Android\Sdk 3.ติดตั้ง node.js ให้เรียบร้อย เพื่อใช้คำสั่ง npm 4. รัน Genemotion และเลือก Add Virtual Device ใช้ Emulator Mobile (ของผมใช้ Nexus5 API23) ขึ้นมาให้เรียบร้อย และ Settings > ADB > Android SDK เลือกไปที่ path android lib sdk ที่โหลดมา จากนั้นใช้คำสั่งเหล่านี้ เพื่อติดตั้ง react native

 npm -g install react-native npm install -g react-native-cli

5. โหลด native-starter-kit project คือตัวอย่างเริ่มต้นของ react-native หรือถ้าต้องการ project เปล่าๆก็ให้ใช้คำสั่ง

 react-native init project_name

6. ทดลองรัน project บน simulator ให้เปิด genemotion ให้เรียบร้อยก่อน CD change directory ย้ายไปที่ project และใช้คำสั่ง รันบน Android

 react-native run-android

รันบน iOS

 react-native run-ios

Posted in ไม่มีหมวดหมู่ | Leave a comment

winload.exe ลงวินโดใหม่ แล้วพบปัญหานี้ แก้ยังไง

เปิดเครื่องมาแล้วเจอข้อความว่า…
Windows Boot Manager

Windows failed to start. A recent hardware or software change might be the cause. To fix the problem:

1. Insert your Windows installation disc and restart your computer.
2. Choose your language settings, and then click “Next.”
3. Click “Repair your computer.”

If you do not have this disc, contact your system administrator or computer manufacturer for assistance

File: \Windows\system32\winload.exe

Status: 0xc000000f

วิธีแก้ให้หาดาวโหลด Easy Recovery Essentials (119MB) Burn Image ทำเป็น Bootable ใส่ CD หรือ USB และเข้าไปตั้งค่า Boot Setup ของ window ตอนเปิดเครื่อง (กด F12) เลือก Boot priority เป็น CD หรือ USB รอโปรแกรมรันขึ้นมา

Posted in ไม่มีหมวดหมู่ | Leave a comment

java jwk verify id token signature

อันนี้ขอไม่อธิบายอะไรเลย ขี้เกียจ ใครเข้ามาพบ แล้วมีคำถามก็ พิมถามไว้แล้วกัน

import com.nimbusds.jose.JOSEException;
import com.nimbusds.jose.JWSVerifier;
import com.nimbusds.jose.crypto.RSASSAVerifier;
import com.nimbusds.jose.jwk.JWKSet;
import com.nimbusds.jose.jwk.RSAKey;
import com.nimbusds.jwt.SignedJWT;

import java.io.File;
import java.io.IOException;
import java.net.MalformedURLException;
import java.net.URISyntaxException;
import java.security.interfaces.RSAPublicKey;
import java.text.ParseException;

/**
 * Created by Panupong_Kon on 11/7/2016.
 */

public class Main {
    public static void main(String [] args) throws JOSEException, URISyntaxException, IOException, ParseException {
        ClassLoader classLoader = new Main().getClass().getClassLoader();
        String jwkFile = "trueid.jwk";

        JWKSet jwkSet = JWKSet.load(new File(classLoader.getResource(jwkFile).getFile()));
        //JWKSet jwkSet = JWKSet.load(new URL("https://c2id.com/jwk-set.json"));
        RSAKey jwk = (RSAKey) jwkSet.getKeyByKeyId("c4ca4238a0b923820dcc509a6f75849b");

        RSAPublicKey publicKey = jwk.toRSAPublicKey();

        String idToken = "eyJhbGciOiJSUzI1NiIsImprdSI6Imh0dHBzOlwvXC9jb3JlLWF1dGgudHJ1ZWlkLmFscGhhXC90cnVlaWQuandrIiwia2lkIjoiYzRjYTQyMzhhMGI5MjM4MjBkY2M1MDlhNmY3NTg0OWIifQ.eyJpc3MiOiJodHRwczpcL1wvY29yZS1hdXRoLnRydWVpZC5hbHBoYVwvIiwic3ViIjoia29uZ2FybkBnbWFpbC5jb20iLCJhdWQiOlsiMjEyIl0sImV4cCI6MTQ3ODYzMTY4NSwiaWF0IjoxNDc4NTk1Njg1LCJhdXRoX3RpbWUiOjE0Nzg1OTU2ODV9.xgpPtTxmIdWnD2nZD2sAaj7msKzfNcF2NPrTkyo_S3asyPy0xxxunC9Mce5VVbyyptHtsSTAA_ctqJ8Igf6VS1ju65OwfdCoyK_RijN5L-Vyeycpda3KhlTwc_3uVjyCp_9Gp6uSGZ8dTdeqARWG2NtdQ0THMi_LbBpFvGJktlkdxnT2gU36Mu2nIqhb0qxB1yUeoOKqCdhxRni1qXp-u023XyKJIkaG05D4Fj-ff-0i1Qoy6Jd0dqq1xXSLnOsUOesPmdFvdMXcRchmSq9zMAhVKBkdau-qgljG3UmVn45OLsNUM_MhtKySG0EqymSd8aBMkdj3jE_GVmSt14Jhbw";
        SignedJWT cSignedJWT = null;
        try {
            cSignedJWT = SignedJWT.parse(idToken);
        } catch (ParseException e) {
            e.printStackTrace();
        }

        JWSVerifier verifier = new RSASSAVerifier(publicKey);

        System.out.println("=== Verified signature ===");
        System.out.println("jwk pub = " + jwkFile);
        System.out.print("status = ");
        System.out.println(cSignedJWT.verify(verifier));

        System.out.println("=== Header ===");
        System.out.println("kid = " + cSignedJWT.getHeader().getKeyID());
        System.out.println("alg = "+cSignedJWT.getHeader().getAlgorithm().getName());
        System.out.println("jku = "+cSignedJWT.getHeader().getJWKURL().toString());

        System.out.println("=== Payload ClaimsSet ===");
        System.out.println("iss = "+cSignedJWT.getJWTClaimsSet().getIssuer());
        System.out.println("sub = "+cSignedJWT.getJWTClaimsSet().getSubject());
        System.out.println("aud = "+cSignedJWT.getJWTClaimsSet().getAudience());
        System.out.println("exp = "+cSignedJWT.getJWTClaimsSet().getExpirationTime());

    }
}
Posted in java | Leave a comment

convert pem to jwk ทำอย่างไร

id token ที่ใช้ algor RS256 จะถูกสร้างจาก private key(pem) เวลา client จะทำการ verify signature ของ id token จะต้องใช้ public key ซึ่ง เวลาที่สร้าง private key นั้น มันจะมี public key เป็น keypairs คู่กันอยู่แล้ว เพื่อใช้สำหรับถอดรหัส ซึ่งใน Lib จะใช้โหนด “kid” (key id) ของ jkw(json web token) ซึ่งไฟล์ jwk นั้น สามารถ convert มาจาก private key(pem) ได้ และเลือกเอาแต่ส่วนที่เป็น public key เพื่อนำมาทำ jwk ได้ อันจะเห็นได้จากตัวอย่างของ google ที่ลิ้งนี้ https://www.googleapis.com/oauth2/v2/certs

วิธีการ convert pem to jwk ทำอย่างไร
1. ติดตั้ง node.js เพื่อใช้คำสั่ง npm ติดตั้ง module เพื่อที่จะใช้ convert pem to jwk
2. ใช้คำสั่ง openssl เพื่อสร้าง private.pem

openssl genrsa -out private.pem 2048

3. ใช้คำสั่ง node convert.js เพื่อ convert private.pem เป็น cert.jwk

ขั้นตอนและรายละเอียดอ่านเพิ่มเติมที่นี่

https://github.com/OADA/rsa-pem-to-jwk#rsapemtojwkpem-extrakeys-type

ตัวอย่างไฟล์ convert.js ที่เราต้องสร้างและรันด้วย node.js หลักการทำงานจะอ่านไฟล์ private.pem และใช้ module rsa-pem-to-jwk สร้าง cert.jwk ออกมา

var fs = require('fs');
var rsaPemToJwk = require('rsa-pem-to-jwk');

var pem = fs.readFileSync('private.pem');

var jwk = rsaPemToJwk(pem, {use: 'sig'}, 'public');

console.log(JSON.stringify(jwk));

fs.writeFile("cert.jwk", JSON.stringify(jwk), function(err) {
if(err) {
return console.log(err);
}

});

ตัวอย่างไฟล์ cert.jwk ที่ได้มาเป็นถือเป็น public key ใช้ถอดรหัส id token signature

{

"kty":"RSA",

"use":"sig",

"n":"ANa5v64jAMVAWAKN9RyuI6GOLivCyIMstwl5yncOTiSj098_INOukM8kaVO8QLm4bUobev1eb4VwgPIEzWiCXKeVDaCtf2lQRF5MaVH7nqJSjoOC2MbXtPa0Mv71z_Ov-YcmTL05MxNxxg-A8miVM05xsNNBW2xegBL4bYplNeY4hJ5a2x3NFgg1z7WHwo0v4JqPJi4KqOMtqoJ-4orVgo3AEI6JgylRZbLdrJoTHN1F_ufcH1KkMgPCce90Hy0GA6PnFm1JrOVE7jyx1qv9vFtQQ31wQYMYcGJIsUuqfeiU-e8McF6qDI9KJgJ9vikcrb9a5IuM8KAuQvj_kuq8aeU",

"e":"AQAB"

}

หลังจากนี้เราก็เพิ่มโหนด “kid” เข้าไป และนำมาทำเป็นโหนดซ้อน keys ตาม google ได้เลย

เท่านี้เราก็ได้ cert.jwk เป็นของ server เราเอง เพื่อให้ third party ใช้งานกันได้แล้ว

Posted in ไม่มีหมวดหมู่ | Leave a comment