README

如何在 Laravel 中使用 Socialite 添加 Google 和 Github 登录。结合 Vue 和 Laravel Socialite 的 Google One Tap。

安装

添加包和路由。

composer require "atomjoy/socialites"

回调和本地域名

更改回调域名，将本地域名设置为 example.org 并添加 ssl。

# Google callback
https://example.org/oauth/google/callback

# Github callback
https://example.org/oauth/github/callback

# How to set local domain and SSL for example.org (xampp)
https://github.com/atomjoy/xampp

创建 Google 项目

https://console.cloud.google.com/projectcreate

创建 Google OAuth 授权屏幕

创建一个具有以下权限的应用授权屏幕：auth/userinfo.email

• auth/userinfo.profile
• openid
• 创建 Google oauth 密钥

创建 外部 OAuth 2.0 客户端 ID，添加回调并检索密钥

https://console.cloud.google.com/apis/credentials

在 Github 上创建新的 OAuth 应用并获取密钥

https://github.com/settings/developers

设置

更新回调链接中的 .env 文件，只需更改域名。

配置服务

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GOOGLE_REDIRECT_URL=https://example.org/oauth/google/callback
GOOGLE_HOME_URL=/

GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
GITHUB_REDIRECT_URL=https://example.org/oauth/github/callback
GITHUB_HOME_URL=/

在 config/services.php 中追加

登录按钮

<?php

return [
    'google' => [
        'client_id' => env('GOOGLE_CLIENT_ID'),
        'client_secret' => env('GOOGLE_CLIENT_SECRET'),
        'redirect' => env('GOOGLE_REDIRECT_URL'),
        'homepage' => env('GOOGLE_HOME_URL'),
    ],

    'github' => [
        'client_id' => env('GITHUB_CLIENT_ID'),
        'client_secret' => env('GITHUB_CLIENT_SECRET'),
        'redirect' => env('GITHUB_REDIRECT_URL'),
        'homepage' => env('GITHUB_HOME_URL'),
    ],

    'oauth_drivers' => ['github', 'google']
];

return view('socialites::login-buttons');

JavaScript Google One Tap 对话框和按钮（可选）

@if (Auth::check())
    <div>{{ Auth::user()->name }}</div>
    <a href="/oauth/logout" title="Logout">{{ trans('Logout') }}</a>
@else
    <a href="/oauth/google/redirect" title="Google">{{ trans('Login with Google') }}</a>
    <a href="/oauth/github/redirect" title="Github">{{ trans('Login with Github') }}</a>
@endif

return view('socialites::login-onetap');

运行服务器

@if (!Auth::check())
<div id="buttonDiv"></div>
<script src="https://#/gsi/client" async defer></script>
<script>
    function handleCredentialResponse(response) {
        window.location.href = '/oauth/google/redirect'
        // Here we can do whatever process with the response we want (optional)
        // Note that response.credential is a JWT ID token
        // console.log("Encoded JWT ID token: " + response.credential);
        // fetch('/oauth/google/oauth?token=' + response.credential)
    }

    window.onload = function () {
        google.accounts.id.initialize({
            client_id: "{{ config('services.google.client_id') }}", // Or replace with your Google Client ID
            callback: handleCredentialResponse // We choose to handle the callback in client side, so we include a reference to a function that will handle the response
        });
        // Show "Sign-in" button (optional)
        // google.accounts.id.renderButton(document.getElementById("buttonDiv"),{ theme: "outline", size: "small" });
        // Display the One Tap dialog
        google.accounts.id.prompt();
        // Hide One Tap onclick
        const button = document.querySelector('body');
        button.onclick = () => {
            google.accounts.id.disableAutoSelect();
            google.accounts.id.cancel();
        }
    }
</script>
@endif

发布资源

php artisan serve --host=localhost --port=8000

事件

# Copy Icons
php artisan vendor:publish --tag=socialites-assets --force

# Edit Views
php artisan vendor:publish --tag=socialites-views --force

# Create config example config/socialites.php
php artisan vendor:publish --tag=socialites-config --force

在配置文件中添加更多驱动

<?php

use Atomjoy\Socialites\Events\UserLogged;
use Atomjoy\Socialites\Events\UserCreated;

LICENSE

登录按钮

<?php

return [
    //...

    'facebook' => [
        'client_id' => env('FACEBOOK_CLIENT_ID'),
        'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
        'redirect' => env('FACEBOOK_REDIRECT_URL'),
        'homepage' => env('FACEBOOK_HOME_URL'),
    ],

    'oauth_drivers' => ['github', 'google', 'facebook'],
];

本项目根据 GNU GPLv3 许可证条款授权。

本项目的授权遵循 GNU GPLv3 许可证。