實作完成畫面

這個畫面是表示
「Scottchayaa Labs」這個Google應用程式想要存取你Google帳戶的資訊
需要你登入確認後做授權給這個應用程式的動作
若你已經登入的狀況下
則會跳過輸入帳密的動作
現在很多網站都有支援「第三方登入」
主要是方便使用者可以透過自己既有的帳戶資訊
來註冊登入到此系統(你做的系統)

Google Cloud Platform

前往主控台 > 新增專案 > 選擇你的專案
導覽選單(左上) > API和服務

啟用Google+ API服務

資訊主頁 > 啟用API和服務 > 搜尋「google+」 > 找到Google+ API > 啟用

也可以透過「資料庫」進行搜尋

若你沒有在這個專案底下建立「憑證」，接著會獲得一個警告
啟用Google+ API服務後，可以在資訊主頁下方API服務清單看到

建立憑證

在建立OAuth憑證之前 > 需先完成「OAuth同意畫面」資料設定

這裡有一點要特別注意，OAuth設定相關操作
會需要有自己可以使用的網域
像我自己有 scottchayaa.com.tw
sub domain可以訂成像是 :
api.scottchayaa.com.tw
service.scottchayaa.com.tw
blog.scottchayaa.com.tw

[ 需要填寫的有 ]
應用程式名稱 : Google授權登入畫面時，顯示的名稱
應用程式標誌 : Google授權登入畫面時，顯示的Logo
已授權網域 : OAuth用戶端有用到的domain，這裡需要涵蓋到
應用程式首頁連結 : 填寫你應用程式的首頁連結，假設你有做一個blog，就放你blog的link
應用程式隱私權政策連結 : 填寫你寫的隱私權頁面連結，隱私權文案可以上網抓
應用程式服務條款連結 (選填)

API金鑰 : 存取Google Cloud Service API服務
OAuth用戶端ID : 使用這個
建立OAuth用戶端ID

應用程式類型 : 網路應用程式(透過網頁OAuth認證)

名稱 : 這個OAuth程式的識別名稱，不是應用程式的顯示名稱喔
已授權的JavaScript來源 : 新增你接下來要實作callback api的網域
已授權的重新導向URI : 新增你實作的callback url

建立完成後會得到OAuth ID and Key

接下來你會需要ID和Key來用在你的web應用程式
如 : php, python, c#…
後面我們使用php laravel 來做Google OAuth Login實作

Install Package

1

composer require laravel/socialite

Configuration

1
2
3
4
5
6
7


<?php

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),         // Your Google Client ID
    'client_secret' => env('GOOGLE_CLIENT_SECRET'), // Your Google Client Secret
    'redirect' => 'http://api.scottchayaa.com/google/auth',
],

Routing

1
2
3
4


<?php

Route::get('/google/auth', 'SocialiteController@redirectToProvider');
Route::get('/google/auth/callback', 'SocialiteController@handleProviderCallback');

Controller

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


<?php

namespace App\Http\Controllers;
use Socialite;

class SocialiteController extends Controller
{
    /**
     * Redirect the user to the Google authentication page.
     *
     * @return 301 
     */
    public function redirectToProvider()
    {
        return Socialite::driver('google')->redirect();
    }

    /**
     * Obtain the user information from GitHub.
     *
     * @return \Illuminate\Http\Response
     */
    public function handleProviderCallback()
    {
        $user = Socialite::driver('google')->user();
        dd($user);
    }
}

完成後將api.scottchayaa.com發布到線上可以存取的環境
瀏覽器上輸入http://api.scottchayaa.com/google/auth 後，就會跳轉到Google授權頁面
完成登入授權後，返回到/google/auth/callback ，我們使用laravel dd()顯示使用者授權回來後的資訊

以下介紹幾個重要欄位資料

token : 可以使用此access_token來獲取用戶端的基本資訊

refreshToken : google oauth好像沒有，不過Facebook, line的oauth會出現此欄位資料，主要用來刷新獲取token

expiresIn : tokene過期時間(秒)

id : 用戶端在google的user id => 這個是唯一值，可以作為我們系統實作第三方登入時的依據，非重要

email, nickname, name : 第三方登入後的基礎資料(nickname不一定會有)

avatar : 大頭貼

Conclusion

現在其實可以發現
許多網站和線上遊戲
都有支援第三方登入
方便使用者不用記帳號(email)和密碼
GCP OAuth算是普遍大家都有的服務
所以開發使用者登入功能時
別忘了第三方登入這一塊

實作完成畫面

Google Cloud Platform

啟用Google+ API服務

建立憑證

Laravel Socialite Login

Conclusion