SoftGanz By Little Bear.

Web & Software Developer Gang.

Google

Google+ Sign in : Testing

by Little Bear @July,01 2013 16.34 ( IP : 49...204 ) | Tags : Google

วันนี้ลองเล่น 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:
//&nbsp;  "access_denied" - User denied access to your app
//&nbsp;  "immediate_failed" - Could not automatically log in the user
// console.log('There was an error: ' + authResult['error']);
}
}

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

ที่มา developers.google.com

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



แสดงความคิดเห็น

« 4979
หากท่านไม่ได้เป็นสมาชิก ท่านจำเป็นต้องป้อนตัวอักษรของ Anti-spam word ในช่องข้างบนให้ถูกต้อง
The content of this field is kept private and will not be shown publicly. This mail use for contact via email when someone want to contact you.
Bold Italic Underline Left Center Right Ordered List Bulleted List Horizontal Rule Page break Hyperlink Text Color :) Quote
คำแนะนำ เว็บไซท์นี้สามารถเขียนข้อความในรูปแบบ มาร์คดาวน์ - Markdown Syntax:
  • วิธีการขึ้นบรรทัดใหม่โดยไม่เว้นช่องว่างระหว่างบรรทัด ให้เคาะเว้นวรรค (Space bar) ที่ท้ายบรรทัดจำนวนหนึ่งครั้ง
  • วิธีการขึ้นย่อหน้าใหม่ซึ่งจะมีการเว้นช่องว่างห่างจากบรรทัดด้านบนเล็กน้อย ให้เคาะ Enter จำนวน 2 ครั้ง