0
1

More than 1 year has passed since last update.

Google でログイン を設定

Last updated at Posted at 2023-08-11

Google でログイン を Web クライアントで使う方法です。
次のページを参考にしました。
Googleでログインを実装

Client ID の取得

新しいプロジェクトを作成

google_01.png

認証情報

google_02.png

OAuth 同意画面

google_03.png

アプリ名の入力

google_04.png

アプリ登録の編集

google_05.png

アプリ登録の編集

google_06.png

OAuth クライアント ID の作成

google_07.png

JSON をダウンロード

google_08.png

Web ページの作成

index.html を作成

次を書き換えて下さい。

data-client_id
data-login_uri

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>
Login Test
</title>
</head>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
     data-client_id="371868132900-eg26ng307au********.apps.googleusercontent.com"
     data-login_uri="https://ekzemplaro.org/test_dir"
     data-auto_prompt="false">
</div>
<div class="g_id_signin"
     data-type="standard"
     data-size="large"
     data-theme="outline"
     data-text="sign_in_with"
     data-shape="rectangular"
     data-logo_alignment="left">
</div>
<hr />
<p>Aug/11/2023 PM 18:08</p>
</body>
</html>

ブラウザーでアクセス

google_09.png

関連ページ

HTML API

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1