Zenn
team411Publicationへの投稿
🔑

OAuth2.0を利用してUECクラウドアカウント認証の電通大生しか使えないのWebアプリをReactで作る方法

Sugiyama
2023/10/16に公開
React
#
oauth2
tech

電通大生諸君！

電通大生のみが利用可能なアプリケーションをつくってみたくないか？
当然常識の範囲内で実装してみたいが、そんな君達のためにReactで電通大か否かを認証するやり方を教えて存じよう！

注意！

当然だが、良識の範囲内でおこなうこと。
知ってる人は知ってると思うが、UECクラウドアカウントは 当局から常に監視されている
あたりまえだが、やばいアプリを作成したら相応の処分が来る
絶対この方法でやばいアプリを作成してはならない

なにやるの？

  • OAuth2.0をつかってUECクラウドアカウントのみログイン可能にする
  • ログインしたユーザー情報を取得する

GCPからAPIトークンの取得

UECクラウドアカウントでGCPにログイン

  • Chromeのアカウントは自身のクラウドアカウントにすること

プロジェクトを作成する

  • ポイントは組織と場所にuec.ac.jpを追加すること

OAuth同意画面

  • ポイントはここで内部を選択すること

OAuth2.0 クライアントIDの作成

  • localhostと、localhost:Portを追加することがミソ

Reactを書こう!

OAuth2.0で使う有能ライブラリのインストール

src/app/page.tsx
'use client'

import { GoogleOAuthProvider } from "@react-oauth/google";
import Form from "./pages/Form";

export default function Home() {
  return (
    <main>
      <GoogleOAuthProvider clientId="">
        <Form />
      </GoogleOAuthProvider>
    </main>
  )
}
src/app/pages/Form.tsx
import { GoogleLogin, useGoogleLogin } from '@react-oauth/google'
import React from 'react'
import jwt_decode from 'jwt-decode'

type OAuthResponse = {
    credential: string
    clientId: string
    select_by: string
}
type UserInfo = {
    aud: string
    azp: string
    email: string
    email_verified: boolean
    exp: number
    family_name: string
    given_name: string
    hd: string
    iat: number
    iss: string
    jti: string
    locale: string
    name: string
    nbf: number
    picture: string
    sub: string
}

const Form = () => {
    return (
        <div>

            <GoogleLogin
                onSuccess={
                    (response) => {
                        console.log(response)
                        console.log(jwt_decode(response.credential))
                    }
                }
                onError={() => {
                    console.log("error")
                }}
                useOneTap={true}
                auto_select={true}
            />
        </div>
    )
}

export default Form
  • ミソはresponseのcredentialがJWTで与えられるので、適当にデコードすること

試しにつかってみよう！

  • ログインボタンをおすとこんな感じの画面が登場するぞ
  • 組織外だとログインできない
  • JWTの中身をみると、ユーザーのメールアドレスなどをチェックできる

ログイン後にWebページを表示するとかは？

  • そのくらい電通大生なら当然できるとおもうので、ここでは解説しない
team411
team411Publication

Discussion