ก๊วนซอฟท์แวร์ </softganz> SoftGang (Gang Software)

วันนี้ลองเล่น Google+ sign in API ขอบันทึกเท่าที่ลองทำนะครับ

Step 1: Create a client ID and client secret

สร้าง client ID and client secret , สร้าง Google APIs Console project, เปิดใช้ Google+ API, สร้าง OAuth 2.0 client ID, และลงทะเบียน JavaScript origins:

1. ไปที่ Google APIs Console , เลือก Create จาก pull-down menu ทางด้านซ้าย , และป้อนชื่อ project name (เช่น "Sample").
2. ไปที่ Services pane, เปิดใช้งาน (enable) Google+ API and any other APIs that your app requires.
3. ในช่อง API Access pane, คลิก Create an OAuth 2.0 Client ID.
   • ในช่อง Product name , ป้อนชื่อของ application (เช่น "Sample"), แล้วคลิก Next. ใส่โลโก้เสียหากว่าต้องการ.
   • ในช่อง Client ID Settings section, ทำตามนี้:
   • เลือก Web application สำหรับ Application type.
   • คลิกที่ลิงก์ more options.
   • ในช่อง Authorized Redirect URIs ให้ลบทิ้งให้หมด.
   • ในช่อง Authorized JavaScript Origins ให้เพิ่ม URLs เข้าไป โดย URL แรก สำหรับการพัฒนาระบบ (หากมี port ให้ระบุต่อท้าย เช่น :8080). อีก 2 สำหรับการนำไปใช้งานจริง

     http://localhost
     http://mysite.example.com
     https://mysite.example.com
     

       * คลิกปุ่ม Create client ID.
4. ใน API Access pane, มองหา Client ID for web applications แล้วจดหรือสำเนาค่าของ Client ID และ Client secret ไว้ จำเป็นต้องใช้ตอนทดสอบและใช้งาน

Step 2: Include the Google+ script on your page

วางสคริปท์ด้านล่างไว้บน </body>

<!-- Place this asynchronous JavaScript just before your </body> tag -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Step 3: Adding a sign-in button to your page

วางปุ่ม G+ SignIn ไว้ในตำแหน่งที่ต้องการ

<span id="signinButton">
<span
class="g-signin"
data-callback="signinCallback"
data-clientid="CLIENT_ID"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
 data-scope="https://www.googleapis.com/auth/plus.login">
</span>
</span>

Step 4: Handling the sign-in

โค๊ดสำหรับเรียกกลับเมื่อมีการ signin

function signinCallback(authResult) {
if (authResult['access_token']) {
// Successfully authorized
// Hide the sign-in button now that the user is authorized, for example:
document.getElementById('signinButton').setAttribute('style', 'display: none');
} else if (authResult['error']) {
// There was an error.
// Possible error codes:
//   "access_denied" - User denied access to your app
//   "immediate_failed" - Could not automatically log in the user
// console.log('There was an error: ' + authResult['error']);
}
}

ส่วนอื่น ๆ ลองตามไปดูจากที่มาได้เลยครับ

ที่มา developers.google.com

ปล. ถ้าหากเป็น Facebook ก็ใช้ developers.facebook.com