การสร้างใบรับรอง Push notification ของ iOS

A
<p>รู้สึกเนื้อหานี้ น่าจะยาวมาก คงได้จะได้แบ่งเป็น 2-3 ตอนเป็นแน่ แต่ผมจะอธิบายเน้นๆ เลยแล้วกัน</p> <h1>เริ่มการสร้างใบ CSR</h1> <p>ที่อื่นๆ อาจจะเริ่มสอนจากการสร้างโปรเจค สมัครนู่นนี่นั่น แต่เราจะคิดว่า คุณผ่านขั้นตอนพวกนั้นมาแล้วนะครับ เริ่มจากเรื่องนี้ก่อนเลยแล้วกัน ผมลองๆ ดูแล้ว โครตหลายขั้นตอน เลยต้องทำสรุปมาทีละขั้นก่อนเลย</p> <ol> <li> <p>เปิด Keychain Access บน Mac ขึ้นมาก่อน (พิมพ์ใน Spotlight Search เอาก็ได้)</p> </li> <li> <p>เลือกเมนู <strong>Keychain Access &gt; Certificate Assistant &gt; Request a Certificate from a Certificate Authority.</strong></p> <p><img src="/resource/attach/2015-37/2015-09-10_12-40-49_754958.png" alt="imgbox" /></p> </li> <li> <p>ใส่ User email (ให้ตรงกับ developer account ของเรา) แล้วก็ common name (ผมใส่ชื่อ App ที่จะสร้าง) ชื่อ CA email ให้ว่างไว้ เพราะเราจะเลือก Saved to disk จากนั้นก็กดปุ่ม Continue ได้เลย</p> <p><img src="/resource/attach/2015-37/2015-09-10_12-44-12_659957.png" alt="imgbox" /></p> </li> <li> <p>เลือกที่ Save ดีๆ เพราะต้องเอาไปใช้ในขั้นตอนถัดไปนะครับ</p> </li> </ol> <p>&nbsp;</p> <h1>ถัดมาการขอใบรับรอง App ID</h1> <ol> <li> <p>ขั้นแรก Login เข้า <strong><a href="https://developer.apple.com/">developer.apple.com</a></strong> ให้เรียบร้อย แล้วไปที่เมนู <strong>Identifiers &gt; App IDs</strong> ดังรูป</p> <p><img src="/resource/attach/2015-37/2015-09-10_12-20-33_705388.png" alt="imgbox" /></p> </li> <li> <p>คลิ้กปุ่มบวก ที่มุมซ้ายบน</p> <p><img src="/resource/attach/2015-37/2015-09-10_12-20-33_743328.png" alt="imgbox" /></p> </li> <li> <p>จากนั้นก็ตั้งชื่อ <strong>App Name</strong> และเลือก <strong>Explicit App ID</strong> แต่มันจะสำคัญตรง <strong>Bundle ID</strong> นี่ล่ะ</p> <p><img src="/resource/attach/2015-37/2015-09-10_12-20-33_781119.png" alt="imgbox" /></p> <p>มันต้องตั้งให้ตรงกับ app id ของ phonegap ของโปรเจค ของเราที่สร้างเอาไว้ด้วย (ดูในไฟล์ confgi.xml ได้ว่า เราตั้งไว้อย่างไร)</p> <p><img src="/resource/attach/2015-37/2015-09-10_12-22-52_313145.png" alt="imgbox" /></p> </li> <li> <p>จากนั้นที่หัวข้อ App Service ให้ติดที่ <strong>Push Notifications</strong> ด้วย</p> <p><img src="/resource/attach/2015-37/2015-09-10_12-25-40_417843.png" alt="imgbox" /></p> </li> <li> <p>จากนั้นกดปุ่ม Continue เพื่อไปขั้นตอนยืนยันที่จะสร้าง สังเกตว่าตรง <strong>Push Notifications</strong> จะเป็น <strong>Configurable</strong> นะครับ</p> <p><img src="/resource/attach/2015-37/2015-09-10_12-28-30_250546.png" alt="imgbox" /></p> </li> <li> <p>ถ้าเรียบร้อยแล้วก็กดปุ่ม Submit เพื่อบันทึกได้เลย</p> </li> <li> <p>เมื่อเรียบร้อยแล้วให้กลับมาที่หน้า <strong>Identifiers &gt; App IDs</strong> อีกครั้ง แล้วเลือก ไอ้ App ที่เราเพิ่งสร้างตะกี้นี้ แล้วกดปุ่ม Edit</p> <p><img src="/resource/attach/2015-37/2015-09-10_12-32-41_636705.png" alt="imgbox" /></p> </li> <li> <p>เลื่อนไปล่างๆ จนถึงหัวข้อ <strong>Push Notifications</strong> แล้วกดปุ่ม <strong>Create Certificate</strong></p> <p><img src="/resource/attach/2015-37/2015-09-10_12-35-00_311978.png" alt="imgbox" /></p> </li> <li> <p>กดปุ่มถัดไปเรื่อยๆ จนถึงหน้า ที่ให้ <strong>Upload CSR file.</strong> ก็ให้กดเลือกไฟล์ จากขั้นอตนที่แล้ว เข้าไป แล้วกดปุ่ม <strong>Generate</strong> แล้วรอซักพัก ก็จะได้ใบรับรองมาให้ <strong>Download</strong> ให้กดดาวน์โหลดเก็บไว้ ดีดี นะค่าบบ ต้องเอาไปใช้อีกหลายขั้นตอน</p> <p><img src="/resource/attach/2015-37/2015-09-10_12-57-34_463064.png" alt="imgbox" /></p> </li> <li> <p>ทำแบบนี้ กับ <strong>Production SSL</strong> ด้วย (ที่หน้าขั้นตอนที่ 8) แล้วดาวน์โหลดมาแยกชื่อกันใช้ชัดเจนนะครับ</p> </li> </ol> <p>&nbsp;</p> <h1>เอาใบรับรองมาแปลธาตุ</h1> <ol> <li> <p>เริ่มจาก ไอ้ไฟล์ใบรับรอง 2 ไฟล์ ที่ได้ มาก่อนหน้านี้ ให้นำเอาไปใส่ใน <strong>Keychain Access</strong> ลากเข้าไปดื้อๆ เลยครับ</p> <p><img src="/resource/attach/2015-37/2015-09-10_13-05-05_961799.png" alt="imgbox" /></p> </li> <li> <p>จากนั้นคลิ้กขวาที่ใบรับรองที่เพิ่มเข้าไปตะกี้นี้แล้วเลือก <strong>Export...</strong></p> <p><img src="/resource/attach/2015-37/2015-09-10_13-16-38_696751.png" alt="imgbox" /></p> <p>มันจะให้เซฟเป็นไฟล์ <code>.p12</code> ตั้งชื่อดีดี นะครับ แยกกันระหว่าง <strong>Production</strong> กับ <strong>Development</strong></p> </li> <li> <p>ทำแบบเดียวกันกับ Private key ของใบรับรองนั้นด้วย และที่เหลือด้วย สรุปแล้วเราจะได้ ไฟล์ <code>.p12</code> มา 4 อัน</p> <p><img src="/resource/attach/2015-37/2015-09-10_13-18-54_695526.png" alt="imgbox" /></p> <p>(เพียบ...)</p> </li> </ol> <p>&nbsp;</p> <h1>สร้างใบรับรองด้วย OpenSSL</h1> <p>เปิด terminal ขึ้นมาครับ แล้วไปที่ folder ที่เก็บพวกใบที่สร้างไว้ก่อนหน้านี้ แล้วใส่คำสั่งสร้างประมาณนี้ครับ</p> <pre class="language-bash"><code>openssl pkcs12 -clcerts -nokeys -out aps_dev-cert.pem -in aps_dev.p12

openssl pkcs12 -nocerts -out aps_dev-key.pem -in aps_dev-key.p12

openssl rsa -in aps_dev-key.pem -out aps_dev-key-noenc.pem

cat aps_dev-cert.pem aps_dev-key-noenc.pem > aps_dev.pem</code></pre>

<p><span style="font-size: 11pt;">คำสั่งที่ 2 ต้องใส่ Password แล้วคำสั่งที่ 3 ต้องใส่ Password ที่ได้จากคำสั่งที่สอง , และทำแบบเดียวกันนี้กับ Production ด้วยนะครับ</span></p> <p>ทดสอบใบรับรองที่ได้มาด้วยคำสั่งนี้</p> <pre class="language-bash"><code>openssl s_client -connect gateway.sandbox.push.apple.com:2195 -cert aps_dev-cert.pem -key aps_dev-key.pem

openssl s_client -connect gateway.sandbox.push.apple.com:2195 -cert aps_dev-cert.pem -key aps_dev-key-noenc.pem</code></pre>

<p><code></code><span style="font-size: 11pt;">คำสั่งแรก ต้องใส่ Password คำสั่งที่สองไม่ต้องใส่ และเมื่อทดสอบสำเร็จ จะได้ผลลัพธ์ แบบนี้</span></p> <p><img src="/resource/attach/2015-37/2015-09-10_13-36-00_585461.png" alt="imgbox" /></p> <p>เป็นอันจบขั้นตอนครับ ได้ใบรับรองมาไว้ใช้</p> <hr /> <p>(เดี๋ยวมาต่อภาค 2)</p>
INFO
Beta Version v20.12.15 : ขออภัยเว็บกำลังก่อสร้าง (อีกแล้ว) แต่คราวนี้กำลังสร้างจริงจังละ