月份: 十二月 2017

發表於 程式分享

ionic AES用Key加密

發表於 由Grace撰寫

12/5 ionic 2 做sha256 及 base64 加密 一文使用crypto-js做sha256 及 base64 加密，
延伸說明
1.Base64解密方式

//1.sha256用key加密
let mac_data2: any = CryptoJS.HmacSHA256('AAA', 'key');
console.log('mac_data2: ' + mac_data2);     

//2.再用Base64加密
let mac_data2_base64: string = CryptoJS.enc.Base64.stringify(mac_data2);
console.log('mac_data2_base64: ' + mac_data2_base64);     

//3.Base64解密
let decrypt_base64 = CryptoJS.enc.Base64.parse(mac_data2_base64);
console.log('decrypt_base64: ' + decrypt_base64);

2.AES加解密

//1.明文
var data = [{id: 1}, {id: 2}];

//2.AES用key加密
var ciphertext = CryptoJS.AES.encrypt(JSON.stringify(data), 'secret key 123');
console.log('ciphertext: ' + ciphertext);
    
//3.AES用key解密
var bytes  = CryptoJS.AES.decrypt(ciphertext.toString(), 'secret key 123');
console.log('bytes: ' + bytes);
    
var decryptedData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
console.log('decryptedData: ' + decryptedData);

Ref. crypto-js

發表於 程式分享

ionic 2 動態載入iframe src – 不使用 DomSanitizer bypassSecurityTrustResourceUrl 的方式

發表於 由Grace撰寫

12/3試了 ionic 2 動態載入iframe src但需要使用DomSanitizer bypassSecurityTrustResourceUrl 的方式，
今天試了另一種方式，範例如下:
1.cart.ts檔

import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { AlertController } from 'ionic-angular';
import { DomSanitizer } from '@angular/platform-browser';

@IonicPage()
@Component({
  selector: 'page-cart',
  templateUrl: 'cart.html'
})
export class CartPage {
    @ViewChild('ifr') ifr: ElementRef;
    loading: any;
    
  constructor(public alertCtrl: AlertController, private sanitizer: DomSanitizer) {
  }
  
  ionViewDidLoad() {
    this.ifr.nativeElement['src'] = 'https://warrant.xxxxx.com.tw/xxxxweb/';
    this.presentLoading();
  }
    
  presentLoading() {
    this.loading = this.alertCtrl.create({
          title: '下載中...',
          message: '測試訊息',
          buttons: [{
            text: 'Ignore',
            role: 'cancel'
          }, {
            text: 'View',
            handler: () => {
              //this.nav.push(DetailsPage, { message: '測試訊息-2' });
              console.log('測試訊息-2 handler');
            }
          }]
    });
    this.loading.present();
  }
  
  dismissLoading(){
    this.loading.dismiss();
  }
}

2.cart.html


<iframe data-tap-disabled="true" style="height:100%;width:100%;" src="https://www.xxx.com.tw/" #ifr/>
發表於 程式分享

Java開發mail寄送含附件及數位簽章

發表於 由Grace撰寫

1.需先引用此3個jar檔: bcmail-jdk16-146.jar、bcprov-jdk16-146.jar、mail.jar

2.先申請mail測試憑證
同事介紹一免費憑證申請Free Email Certificate
請用IE申請(我用Chrome無法申請)，申請後收到email點選確認信後，
憑證是下載到IE / 工具 / 網際網路選項 / 內容 / 憑證 / “個人"頁
找到新申請的憑證
發給欄: 為申請的email帳號，
簽發者: 為COMODO RSA Client Authentication and Secure Email CA，
請將檔案匯出成pfx檔。

3.程式碼: 為方便測試我以jsp撰寫

<%@ page language="java" contentType="text/html; charset=BIG5"
    pageEncoding="BIG5"%>
<%@ page import="java.io.*" %>
<%@ page import="java.security.*" %>
<%@ page import="java.security.cert.*" %>
<%@ page import="java.util.*" %>
<%@ page import="javax.mail.*" %>
<%@ page import="javax.mail.internet.*" %>
<%@ page import="javax.mail.internet.*" %>
<%@ page import="org.bouncycastle.mail.smime.*" %>
<%@ page import="javax.activation.*" %>
<%
    //1.讀取pfx檔
    KeyStore keyStore = KeyStore.getInstance("PKCS12");   
    //請將匯出的pfx檔放至與jsp檔案同一路徑
    String pfxFilePath = application.getRealPath("/test.pfx");    
    FileInputStream fis = new FileInputStream(pfxFilePath); 
    //xxxxxx請用pfx檔匯出時儲存的密碼
    char[] key = "xxxxxx".toCharArray();
    keyStore.load( (InputStream) fis, key);
    Enumeration e = keyStore.aliases();
    String alias = (String) e.nextElement();    
    PrivateKey pk = (PrivateKey) keyStore.getKey(alias, key);   
    X509Certificate pkcs12Cert = (X509Certificate) keyStore.getCertificate(alias);  
    SMIMESignedGenerator gen = new SMIMESignedGenerator();  
    gen.addSigner(pk, pkcs12Cert, SMIMESignedGenerator.DIGEST_SHA1);
    
    //2.email 內容
    MimeBodyPart msg = new MimeBodyPart();
    
    MimeBodyPart mbp1 = new MimeBodyPart();
    String message = "這是測試資料.";
    mbp1.setContent(message.toString(), "text/html; charset=big5");
    
    Multipart mp = new MimeMultipart();
    mp.addBodyPart(mbp1);
    
    //3.email 附檔
    MimeBodyPart messageBodyPart = new MimeBodyPart();
    String attachFile = "下載.png";
    String attachPath = application.getRealPath("/" + attachFile);
    DataSource source = new FileDataSource(attachPath);
    messageBodyPart.setDataHandler(new DataHandler(source));
    messageBodyPart.setFileName(MimeUtility.encodeText(attachFile, "BIG5", "B"));
    mp.addBodyPart(messageBodyPart);

    msg.setContent(mp); 

    //4.以pfx簽 email 內容 及 email 附檔
    MimeMultipart mm = gen.generate(msg, new org.bouncycastle.jce.provider.BouncyCastleProvider ());
    
    Properties props = System.getProperties();
    props.put("mail.smtp.host", "webmail.xxx.com.tw");
    Session mailSession = Session.getDefaultInstance(props, null);
    
    //5.設定寄件者及收件者
    MimeMessage body = new MimeMessage(mailSession);
    InternetAddress fromUser = new InternetAddress("service@xxx.com.tw");
    fromUser.setPersonal("測試人員", "big5");
    body.setFrom(fromUser);
    
    String contact = "user1@xxx.com.tw, user2@xxx.com.tw, user3@xxx.com.tw";
    body.setRecipients(Message.RecipientType.TO, InternetAddress.parse(contact.trim()));
    
    //6.設定標題、內文
    body.setSubject("Signed message 範例" ,"big5");
    body.setHeader("X-Mailer", "Java mailer"); 
    body.setContent(mm, mm.getContentType());
    
    body.saveChanges();
    
    //7.傳送
    Transport.send(body);
%>

4.傳送結果
1

發表於 程式分享

ionic 2 做sha256 及 base64 加密

發表於 由Grace撰寫

1.npm install crypto-js

2.程式碼

import { Component } from '@angular/core';
import { IonicPage, MenuController, NavController } from 'ionic-angular';
import * as CryptoJS from 'crypto-js';

@IonicPage()
@Component({
  selector: 'page-tutorial',
  templateUrl: 'tutorial.html'
})
export class TutorialPage {
  constructor(public navCtrl: NavController, public menu: MenuController) {
  }

  ionViewDidEnter() {
    let mac_data2: any = CryptoJS.HmacSHA256('AAA', 'key');
    console.log('mac_data2: ' + mac_data2);
  }
}

3.執行結果

mac_data2: c23468514f9dfea9647435df6924436cb3833bfc3d5b5d4e9a129f410ca0e408

4.驗證畫面
連至jsSHA
1

Ref.JWT 認證在 RESTful service 上的應用 (3) – Angular

發表於 程式分享

ionic2 讀取 server json資料，並轉換成QRCode供使用者掃描

發表於 由Grace撰寫

1.json資料

[
    {
        "Id": 1,
        "ShopId": "BS042",
        "Active": 1,
        "Description": "這是第一筆最新訊息-for BS042特店",
        "ModifyDateTime": "2017-11-26T10:41:47",
        "UserAcct": null,
        "UserStatus": 0,
        "Image": "https://www.xxx.com.tw/testWeb/img/img2.png"
    },
    {
        "Id": 2,
        "ShopId": "BS042",
        "Active": 1,
        "Description": "這是第2筆最新訊息-for BS042特店",
        "ModifyDateTime": "2017-11-26T10:41:33",
        "UserAcct": null,
        "UserStatus": 0,
        "Image": "https://www.xxx.com.tw/testWeb/img/img2.png"
    }
]

2.讀取server json資料
檔名: list-master.ts

import { Component } from '@angular/core';
import { IonicPage, ModalController, NavController } from 'ionic-angular';
import { Item } from '../../models/item';
import { Items } from '../../providers/providers';
import { Api } from '../../providers/providers';

@IonicPage()
@Component({
  selector: 'page-list-master',
  templateUrl: 'list-master.html'
})
export class ListMasterPage {
  currentNews: Item[];

  constructor(public navCtrl: NavController, public items: Items, public modalCtrl: ModalController,
    private api: Api) {
    this.currentItems = this.items.query();
    
    let postParams = {
      ShopId : 'BS042',
      UserAcct : 'grace',
      Lang : 'zh'
    }
    let seq = this.api.post('getReq.jsp', postParams).share();
    seq.subscribe((res: any) => {
        this.currentNews = res;        
    }, err => {
        console.error('ERROR', err);
    });
  }
  
  openNews(item: Item) {
    this.navCtrl.push('QrcodePage', {
      item: item
    });
  }
}

3.顯示json資料
檔名: list-master.html

  
<ion-header>
  <ion-navbar>
    <ion-title>最新消息</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item-sliding *ngFor="let item of currentNews">
      <button ion-item (click)="openNews(item)">
        <ion-avatar item-start>
          <img [src]="item.Image" />
        </ion-avatar>
        <h2>{{item.Description}}</h2>
        <p>{{item.Active}}</p>
        <ion-note item-end *ngIf="item.UserStatus">{{item.UserStatus}}</ion-note>
      </button>
    </ion-item-sliding>
  </ion-list>
</ion-content>

1.PNG

4.顯示QRCode碼
檔名: qrcode.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';

@IonicPage()
@Component({
  selector: 'page-qrcode',
  templateUrl: 'qrcode.html'
})
export class QrcodePage {
  encodeData2 : string = '';
  
  constructor(public navCtrl: NavController, public navParams: NavParams, private qrScanner: QRScanner) {
    if (navParams.get('item')) {
        let item = navParams.get('item');
        this.encodeData2 = 'Id=' + item.Id + '&ShopId=' + item.ShopId + '&UserAcct=' + 'grace';
    }
  }
}

檔名: qrcode.html

 
<ion-header>
 <ion-navbar>
     <ion-title text-center>QRCode</ion-title>
 </ion-navbar>
</ion-header>
<ion-content padding>
   <ion-card>
        <ion-card-header class="text-c">
            <ion-input type="text" [(ngModel)]="encodeData2" name="encodeData2" placeholder="請輸入QRCode"></ion-input>
        </ion-card-header>
        <ion-card>
            <qrcode [qrdata]="encodeData2" [size]="256" [level]="'M'"></qrcode>
        </ion-card>
    </ion-card>
</ion-content>

2

發表於 程式分享

ionic 2 動態載入iframe src

發表於 由Grace撰寫

1.最先遇到的問題是caused by: unsafe value used in a resource URL context，其解法為加上DomSanitizer 解析 url
cart.ts檔

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Loading, LoadingController } from 'ionic-angular';
import { DomSanitizer } from '@angular/platform-browser';
import { User } from '../../providers/providers';

@IonicPage()
@Component({
  selector: 'page-cart',
  templateUrl: 'cart.html',
})
export class CartPage {
    private webUrl : any;
    loading: Loading;

    constructor(public navCtrl: NavController, public navParams: NavParams,
        private user: User, private sanitizer: DomSanitizer,
        public loadingCtrl: LoadingController) {        
        this.webUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.user._user.shopItem.WebUrl);
    }

    ionViewWillEnter(): void {
        this.loading = this.loadingCtrl.create({
            content: 'Please wait...'
        });

        this.loading.present();
    }

    handleIFrameLoadEvent(): void {
        this.loading.dismiss();
    }
}

html檔:



2.而後遇到page需load兩次才能正常顯示畫面，查了許久，發現因是放在 <ion-tab> 的第二個，但其原本預設的root 非 CartPage，調整後就好了