replit.com Flet GitHub Google 認証

Last updated at 2024-03-11Posted at 2024-03-11

replit.com Flet GitHub Google 認証を手探りでやってみる

Flet GitHub 認証サンプル通りにやってみる

Fletのドキュメントで認証 Flet Authentication

MyApp ページが作成される。

クライアントシークレット【新しいクライアントシークレッツを生成する】ボタンクリック
Client ID と Client secret を控えておく

replit.com でプロジェクト作成

【+Create Repl】クリック

Template : Flet
Title : MyAppOAuth

プロジェクトにmain.pyが作成される。

開発環境URL確認

Run して Webview の URLをクリックして Dev URL: を控える。

Configuring OAuth provider

GitHub OAuth app

フレッツ認証を GitHub と統合するには、最初に新しいGitHub OAuth アプリを登録する必要があります (プロファイル設定→開発者設定→ OAuth アプリ)。

アプリケーション名 : MyApp
ホームページURL : さっき控えた Dev URL
アプリケーションの説明 :
認可コールバック URL : さっき控えた Dev URL/api/oauth/redirect
ボタン【アプリケーションを登録する】クリック

OAuth コードを上書き

Fletドキュメントの(OAuth)のコードをそのままmain.pyに上書きする。

main.py

import os

import flet as ft
from flet.auth.providers import GitHubOAuthProvider

GITHUB_CLIENT_ID = os.getenv("GITHUB_CLIENT_ID")
assert GITHUB_CLIENT_ID, "set GITHUB_CLIENT_ID environment variable"
GITHUB_CLIENT_SECRET = os.getenv("GITHUB_CLIENT_SECRET")
assert GITHUB_CLIENT_SECRET, "set GITHUB_CLIENT_SECRET environment variable"

def main(page: ft.Page):
    provider = GitHubOAuthProvider(
        client_id=GITHUB_CLIENT_ID,
        client_secret=GITHUB_CLIENT_SECRET,
        redirect_url="さっき控えた Dev URL/api/oauth/redirect",
    )

    def login_click(e):
        page.login(provider)

    def on_login(e):
        print("Login error:", e.error)
        print("Access token:", page.auth.token.access_token)
        print("User ID:", page.auth.user.id)

    page.on_login = on_login
    page.add(ft.ElevatedButton("Login with GitHub", on_click=login_click))

ft.app(target=main, port=8550, view=ft.WEB_BROWSER)

Secret 作成

左ToolsペインのSecretsをクリック
右ペインに鍵がくるくる。

【+New Secret】ボタンをクリックして環境変数を作成する。

Key : GITHUB_CLIENT_ID , Value : さっき控えた Client ID
Key : GITHUB_CLIENT_SECRET, Value : さっき控えた Client secret

※ githubページ右上ユーザーアイコンをクリックして Settings > Developer settings > OAuth Apps > MyApp とクリックするといつでも Client ID は確認できるが Client secret は確認できないので控えてなければ作り直さないといけない。

認証確認

【Run】ボタンクリック
開発環境なので127.0.0.0:xxxxのページが開くが閉じる。
Webview に【Login with GitHub】ボタンが表示されてサンプルが実装できた。

開発環境のURLとPort