[Flask教學] 5分鐘上手Flask Google login登入

此篇參考官方文件 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 相關教學：

[Flask教學] 5分鐘上手Flask Google login登入教學結束囉，感謝收看，有關Max行銷誌的最新文章，都會發佈在Max的Facebook粉絲專頁，如果想看最新更新，還請您按讚或是追蹤唷！

Max行銷誌

行銷、數據分析、與 Python

發佈留言取消回覆