{"id":19317754,"url":"https://github.com/queeniecplusplus/github_auth","last_synced_at":"2025-07-18T13:32:52.626Z","repository":{"id":104588264,"uuid":"285700444","full_name":"QueenieCplusplus/Github_Auth","owner":"QueenieCplusplus","description":"new react  login app using Oauth","archived":false,"fork":false,"pushed_at":"2020-08-08T04:01:17.000Z","size":459,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-06T04:25:42.223Z","etag":null,"topics":["githubauth","oauth2"],"latest_commit_sha":null,"homepage":"https://github.com/QueenieCplusplus/QuickGoThru/blob/master/README.md#gql-schema--resolver","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/QueenieCplusplus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-07T00:35:41.000Z","updated_at":"2020-08-08T04:01:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"ae505b0d-71f2-45ac-89b5-bf26dc7b7940","html_url":"https://github.com/QueenieCplusplus/Github_Auth","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QueenieCplusplus%2FGithub_Auth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QueenieCplusplus%2FGithub_Auth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QueenieCplusplus%2FGithub_Auth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QueenieCplusplus%2FGithub_Auth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QueenieCplusplus","download_url":"https://codeload.github.com/QueenieCplusplus/Github_Auth/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240420940,"owners_count":19798501,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["githubauth","oauth2"],"created_at":"2024-11-10T01:16:09.206Z","updated_at":"2025-02-24T04:44:52.863Z","avatar_url":"https://github.com/QueenieCplusplus.png","language":"JavaScript","readme":"# Github_Auth\nnew react  login app using Oauth\n\n# Oauth 授權程序\n\n1. client server 端（即用戶端或是前端）: 使用 url 和 client_id 向 GitHub 申請(request)代碼 code。\n2. end user (即使用者)端: 將帳號資訊提供予 client app 使用。\n3. GitHub 官方：傳送 code 給用戶端並且轉址 url: http://localhost:3000?code=katesisagoodcoder\n4. client server 端（即用戶端或是前端）: 傳送 GQL Mutation githubAuth(code)和代碼。\n5. API: 使用憑證(包含 client_id、client_secrete、client_code) 向 GitHub 申請 access_token。\n6. GitHub 官方：回應存取權杖，於未來可使用。\n7. API (後端）: 使用存取權杖請求 end user 資訊。\n8. GitHub 官方： 回應使用者資訊: name、githubLogin、avatar。\n9. API（後端）: 使用 AuthPayload 解析 authUser(code) mutation，內含權仗與使用者。\n10. client server 端 (前端): 儲存 access_token，未來與 GQL 併行使用。\n\n// Demo\n\n![oauth](https://raw.githubusercontent.com/QueenieCplusplus/Github_Auth/master/demo%202.png)\n\n// localStorage\n\n![cache | data](https://raw.githubusercontent.com/QueenieCplusplus/Github_Auth/master/application_localStorage.png)\n\n\n// App.js\n\n    import React from 'react';\n    import './App.css';\n    import { BrowserRouter } from 'react-router-dom'; // 使用此Router將其他元件包覆起來\n    import { gql } from 'apollo-boost'\n    import AuthUser from './AuthUser' //(等待建立)\n    import User from './User' //(等待建立)\n\n    function App() {\n\n      return (\n        \u003cBrowserRouter\u003e\n          \u003cdiv\u003e\n            \u003cAuthUser/\u003e\n            \u003cUser/\u003e\n          \u003c/div\u003e\n        \u003c/BrowserRouter\u003e\n      );\n\n    }\n\n    export default App;\n\n\n// AuthUser.js\n\n    window.location.search.match()\n    window.location.search.replace()\n\n做 button 此按鈕按下後，會將使用者轉址到到 Github Oauth 程序，等待授權完成後，\nGithub Oauth 會將 code 代碼回傳給瀏覽器展示在 window 視窗前：http://localhost:3000?code=xxxxxxxxx\n如果查詢字串裡面有代碼 code，此視窗會將位址解析出來。並且使用 alert() 警示出來。\n最後使用 history 特性移除他。（由 React router 送給此元件的，故使用 Props.history）\n\n另外，此代碼其實不是做來警示 User 得，而是要將 code 送回給 GithubAuth 做 Mutation，待續....。\n\n        // 2020, 8/07\n\n        import React from 'react';\n        import { withRouter } from 'react-router-dom';\n\n        // 另外code file 待做 Mutation 使用 react-apollo 的 {Mutation} \n        // 和使用 apollo-boost 的 { gql }\n        // 將更改的 user info 傳回 DB\n\n        class AuthUser extends React.Component{\n\n\n            // no constructor due to no father component\n            state = { signIn: false };\n\n            reqCode(){\n\n                var Id = \"\u003cGithubAuth_Client_ID\u003e\";\n\n                window.location = \"https://github.com/login/oauth/authorize?client_id=${Id}\u0026scope=user\";\n\n            }\n\n            componentDidMount(){\n\n                if(window.location.search.match(/code=/)){\n\n                    this.setState({signIn: true})\n                    const code = window.location.search.replace(\"?code=\", \"\")\n                    alert(code)\n                    this.props.history.replace(\"/\")\n\n                }\n\n            }\n\n\n            render(){\n\n                return(\n\n                    \u003cbutton onClick= {this.reqCode} disabled = {this.state.signIn}\u003e\n\n                        Sign In With Github Auth\n\n                    \u003c/button\u003e\n\n                )\n            }\n\n        }\n\n        export default withRouter(AuthUser);\n\n\n// User.js (to be continued...)\n\n# { Mutation }\n\n\n        import React from 'react';\n        import { withRouter } from 'react-router-dom';\n        import { Mutation } from 'react-apollo';\n        import { gql } from 'apollo-boost';\n        // import {ROOT_QUERY} from './App.js'\n\n        // 另外code file 待做 Mutation 使用 react-apollo 的 {Mutation} \n        // 和使用 apollo-boost 的 { gql }\n        // （1）並將 code 代碼 從警示使用者改為傳送給 githubAuth mutation\n\n        const GITHUB_AUTH_MUTATION = gql`\n            mutation githubAuth($code: String!){\n                githubAuth(code:$code) {\n                    token\n                }\n            }\n        `\n\n        class AuthUser extends React.Component{\n\n            // no constructor due to no father component\n            // this state is set to bool data type \n            state = { signIn: false };\n\n            reqCode(){\n\n                var Id = \"\u003cGithubAuth_Client_ID\u003e\";\n\n                window.location = \"https://github.com/login/oauth/authorize?client_id=${Id}\u0026scope=user\";\n\n            }\n\n            componentDidMount(){\n\n                if(window.location.search.match(/code=/)){\n\n                    this.setState({signIn: true})\n                    const code = window.location.search.replace(\"?code=\", \"\")\n                    //(5) 註解警示訊息，改成將 code 傳回 github 的方法\n                    //alert(code)\n                    this.props.history.replace(\"/\")\n                    this.githubAuthMutation({variables: {code}})\n                }\n\n            }\n\n            // (3) 建立 Mutation 元件要綁定 update 的方法\n            authorizationComplete = (cache, {data}) =\u003e {\n\n                localStorage.setItem('token',data.githubAuth.token)\n                this.props.history.replace('/')\n                this.setState({signIn: false})\n\n            }\n\n            // (2) 將上面命名為 GITHUB_AUTH_MUTATION 的 const \n            // 常數包覆的回傳值為 token 的 mutation\n            // 授權予使用者，呈現 UI 如下。\n            render(){\n\n                return(\n\n                    // (4) 處理回傳值並且呈現在 UI 上\n                    // Mutation 元件 含有 mutaion 屬性\n                    // 和 update 、 refetchQueries 方法\n                    \u003cMutation mutation = {GITHUB_AUTH_MUTATION}\n                        update = {this.authorizationComplete}\n                        //refetchQueries = {[{query: ROOT_QUERY}]}\n                        \u003e\n\n                        {mut =\u003e {\n                            this.githubAuthMutation = mut\n                            return(\n                                \u003cbutton\n                                    onClick = {this.reqCode}\n                                    disabled = {this.state.signIn}\n                                    \u003e\n\n                                    Sign In With Github Auth\n\n                                \u003c/button\u003e\n                            )\n                        }}\n\n                    \u003c/Mutation\u003e\n\n                )\n            }\n        }\n\n        export default withRouter(AuthUser);\n\n# { withRouter }\n\nhttps://github.com/QueenieCplusplus/React_withRouter/blob/master/README.md\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqueeniecplusplus%2Fgithub_auth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqueeniecplusplus%2Fgithub_auth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqueeniecplusplus%2Fgithub_auth/lists"}