---
# System prepended metadata

title: laravel/串Google第三方平台
tags: [Laravel]

---

# Google Cloud Platform (GCP) 設定 OAuth

## 1. 搜尋 GCP 名稱

Google Cloud Platform (GCP)

![GCP 搜尋結果](https://hackmd.io/_uploads/r1aaSlUc1x.png)

## 2. 進入控制台

![GCP 控制台](https://hackmd.io/_uploads/SkXzIl89Jl.png)

### 第一次使用需同意服務條款

![服務條款](https://hackmd.io/_uploads/S1UNUe8qyx.png)

## 3. 啟用 API

### 點擊選單 -> API 和服務 -> 程式庫

![API 服務](https://hackmd.io/_uploads/SyP1DxI9kl.png)

### 搜尋並啟用 Google+ API

![Google+ API](https://hackmd.io/_uploads/HJnTPgU51l.png)

## 4. 設定 OAuth 同意畫面

### 應用程式資訊
- **應用程式名稱**: 可自行命名
- **使用者支援電子郵件**: 選擇當前登入的 Google 帳號

![應用程式資訊](https://hackmd.io/_uploads/H1Jase85Jg.png)

### 目標對象
- 一般用戶，選擇**外部**

![目標對象](https://hackmd.io/_uploads/S1xPneU9Jl.png)

### 聯絡資訊
- 填寫當前登入的 Google 帳號

![聯絡資訊](https://hackmd.io/_uploads/SynsAgL9Jl.png)

### 完成
- 勾選 **我同意** -> **繼續** -> **建立**

![建立 OAuth](https://hackmd.io/_uploads/H1Vg6eL9ke.png)

## 5. 建立 OAuth 用戶端 ID

### 點擊選單 -> API 和服務 -> 憑證 -> 建立憑證 -> OAuth 用戶端 ID

![OAuth 用戶端 ID](https://hackmd.io/_uploads/ByCc1bUcJg.png)

### 應用程式類型
- **應用程式類型**: **網頁應用程式**
- **名稱**: 可修改或保留預設
- **已授權的重新導向 URL**: 測試環境可以依照你的專案名稱設定**laravelclasstest.com**

![OAuth 設定](https://hackmd.io/_uploads/S1MdWZU91l.png)

## 6. 修改 Hosts 文件 (本機測試)

- **位置**: `C:\Windows\System32\drivers\etc\hosts`
- **設定**: `127.0.0.1 laravelclasstest.com`

![修改 Hosts](https://hackmd.io/_uploads/H1I1VZI5ke.png)

## 7. 安裝 Laravel Socialite

### 進入專案目錄並安裝
```bash
composer require laravel/socialite
```

### 修改 `config/services.php`
```php
'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),
    'redirect' => 'http://laravelclasstest.com/google/auth/callback',
],
```
![修改config/services.php](https://hackmd.io/_uploads/ryongmL5ye.png)

### 修改 `.env` 檔案
```env
GOOGLE_CLIENT_ID=貼上用戶端編號
GOOGLE_CLIENT_SECRET=貼上用戶端密碼
```
![修改.env](https://hackmd.io/_uploads/BJHg-7Iqyx.png)

## 8. 設定 Laravel 路由

### `routes/web.php`
```php
Route::get('/google/auth', 'App\Http\Controllers\SocialiteController@redirectToProvider');
Route::get('/google/auth/callback', 'App\Http\Controllers\SocialiteController@handleProviderCallback');
```
![修改routes/web.php](https://hackmd.io/_uploads/ByKSZXI91x.png)


## 9. 建立 `SocialiteController`

### `app/Http/Controllers/SocialiteController.php`
```php
use Socialite;

class SocialiteController extends Controller
{
    public function redirectToProvider()
    {
        return Socialite::driver('google')->redirect();
    }

    public function handleProviderCallback()
    {
        $user = Socialite::driver('google')->stateless()->user();
        dd($user);
    }
}
```
![建立並新增判斷式SocialiteController](https://hackmd.io/_uploads/Sy9PbXIcyg.png)

## 10. 測試登入

成功登入 Google 之後，會被導回 `laravelclasstest.com/google/auth/callback`，所以Google會將用戶的名稱、電子郵件地址、語言偏好設定和個人資料相片回傳給我

![進入google/auth](https://hackmd.io/_uploads/H1gTZQIcke.png)
![google登入](https://hackmd.io/_uploads/By7a-m8ckx.png)
![確認google登入](https://hackmd.io/_uploads/B1IaZmIqkg.png)

![登入測試](https://hackmd.io/_uploads/B1WGffL9kx.png)

