此篇參考官方文件 Integrating Google Sign-In into your web app這篇文章，部分程式碼有稍微修改，和列出過程中遇到的Bug，希望對有想用Flask架設google login的朋友有幫助。
文章目錄
1. 建立 Google OAuth 2.0 憑證？
- 在Google Cloud Platform > 點擊APIs & Services >點擊Credentials >建立Create Credentials >選擇Create OAuth client ID 就會到如下圖的畫面
- 應用類型選擇Web application
- 授權來源和重定向URI填入 http://localhost:5000
- 點選建立，就完成囉！
2. Flask 建立 login 前端畫面
- 完整html如下，可以看到<div class=”g-signin2″ data-onsuccess=”onSignIn”></div>這段是產生google login的登入按鈕
- 點擊按鈕後會呼叫function onSignIn，如果登入成功會console.log出使用者資訊來，並且用$.ajax Post的方始將Token ID傳到Flask後端
- 接下來我們看一下Flask後端main.py的檔案內容
<html>
<head>
<title>Google Sign-In</title>
<meta name="google-signin-client_id" content="{{ google_oauth2_client_id }}">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
<script>
function onSignIn(googleUser) {
var id_token = googleUser.getAuthResponse().id_token;
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
$.ajax({
type: "POST",
url: '/google_sign_in',
data: JSON.stringify({'id_token': id_token}),
success: function() {
console.log('login success')
},
dataType: 'json',
contentType:"application/json",
});
}
</script>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
</body>
</html>3. Flask 建立 login 後端設定
- 完整代碼如下，首先要修改GOOGLE_OAUTH2_CLIENT_ID = ‘將自己的Client id輸入’ (可以在我們一開始建立的Google APIs & Services頁面中找到Client ID)
- 再來看到 @app.route(‘/google_sign_in’, methods=[‘POST’])這邊是接收剛剛前端所傳來的Cliend ID Token
- 最後運行在終端機 env FLASK_APP=app.py flask run
- 趕快自己測試看看吧
# -*- coding: utf-8 -*-
from google.oauth2 import id_token
from google.auth.transport import requests
from flask import Flask
from flask import request
from flask import jsonify
from flask import render_template
GOOGLE_OAUTH2_CLIENT_ID = '這部分輸入自己的_oauth2_client_id'
def create_app(app_env=None):
flask_app = Flask(__name__)
return flask_app
app = create_app()
@app.route('/')
def index():
return render_template('index.html', google_oauth2_client_id=GOOGLE_OAUTH2_CLIENT_ID)
@app.route('/google_sign_in', methods=['POST'])
def google_sign_in():
token = request.json['id_token']
try:
id_info = id_token.verify_oauth2_token(
token,
requests.Request(),
GOOGLE_OAUTH2_CLIENT_ID
)
if id_info['iss'] not in ['accounts.google.com', 'https://accounts.google.com']:
raise ValueError('Wrong issuer.')
except ValueError:
# Invalid token
raise ValueError('Invalid token')
print('登入成功')
return jsonify({}), 200發生 Error: invalid_request 怎麼辦？
- 詳細錯誤訊息如下：Permission denied to generate login hint for target domain.
- 原因是Google OAuth的登入他不吃IP
- 所以只需要將http://127.0.0.1:5000/改成http://localhost:5000就可以成功登入囉！
關於 Flask 教學的延伸閱讀：
▍關於 Flask 教學系列目錄：
▍其他 Flask 相關教學：
- 【Flask教學系列】Flask 為甚麼需要 WSGI 與 Nginx
- 【Flask教學系列】Flask-SQLAlchemy 資料庫連線&設定入門 (一)
- 【Flask教學系列】Flask-JWT-Extended 實作
- 【Flask教學系列】實作 Flask CORS
- 【Flask教學系列】實作 Flask CSRF Protection
- 【Flask教學系列】實作 Dockerfile + nginx + ssl + Flask 教學 (附GitHub完整程式)
[Flask教學] 5分鐘上手Flask Google login登入教學結束囉，感謝收看，有關Max行銷誌的最新文章，都會發佈在Max的Facebook粉絲專頁，如果想看最新更新，還請您按讚或是追蹤唷！