{"id":19423262,"url":"https://github.com/atomjoy/google-login-button","last_synced_at":"2026-05-16T02:09:08.012Z","repository":{"id":157080491,"uuid":"633302810","full_name":"atomjoy/google-login-button","owner":"atomjoy","description":"Funkcja Zaloguj się przez Google umożliwia łatwe i bezpieczne logowanie się w aplikacjach lub usługach innych firm przy użyciu konta Google. Przycisk logowania google oauth na stronę internetową www (oAuth2, Vue3, Laravel).","archived":false,"fork":false,"pushed_at":"2024-02-29T11:36:07.000Z","size":118,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-07T18:53:37.755Z","etag":null,"topics":["google-login-button","google-login-button-vue3-laravel","google-oauth-login","google-oauth2-jwt","google-przycisk-logowania","vue3-google-login","vue3-google-signin","vue3-laravel-google-login-button"],"latest_commit_sha":null,"homepage":"https://github.com/atomjoy/google-login-button","language":"PHP","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/atomjoy.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":"2023-04-27T07:59:31.000Z","updated_at":"2023-05-05T10:02:35.000Z","dependencies_parsed_at":"2024-11-10T13:49:26.341Z","dependency_job_id":null,"html_url":"https://github.com/atomjoy/google-login-button","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomjoy%2Fgoogle-login-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomjoy%2Fgoogle-login-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomjoy%2Fgoogle-login-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomjoy%2Fgoogle-login-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atomjoy","download_url":"https://codeload.github.com/atomjoy/google-login-button/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240603056,"owners_count":19827635,"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":["google-login-button","google-login-button-vue3-laravel","google-oauth-login","google-oauth2-jwt","google-przycisk-logowania","vue3-google-login","vue3-google-signin","vue3-laravel-google-login-button"],"created_at":"2024-11-10T13:37:38.852Z","updated_at":"2026-05-16T02:09:02.976Z","avatar_url":"https://github.com/atomjoy.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Logowanie za pomocą konta Google (Google signin button)\nFunkcja Zaloguj się przez Google umożliwia łatwe i bezpieczne logowanie się w aplikacjach lub usługach innych firm przy użyciu konta Google. Przycisk logowania Google oAuth na stronę internetową www (oAuth2).\n\n## Utwórz swoją aplikację\n\u003chttps://console.cloud.google.com\u003e\n\n## Dodaj klucz oAuth do swojej aplikacji (pobierz plik json klucza z clientId)\nDodaj adresy uri dla klucza wideo: \u003chttps://www.youtube.com/watch?v=EaSWnk5fLdc\u003e\n- http://localhost\n- http://localhost:8000\n- https://your.page.url\n\n## Generator przycisku logowania Google\n\u003chttps://developers.google.com/identity/gsi/web/tools/configurator?hl=en\u003e\n\n## Css style\n\nLikwidacja białego tła iframe dla dark mode w przeglądarce.\n\n```\niframe {\n\tcolor-scheme: light !important;\n}\n```\n\n## Przycisk z Javascript Api\n\nZmień google klient id: \u003cGOOGLE_CLIENT_ID\u003e.apps.googleusercont.com\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"pl\"\u003e\n\n\u003chead\u003e\n  \u003cmeta charset=\"utf-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\u003c/meta\u003e\n\u003cbody\u003e\n  \u003cscript src=\"https://accounts.google.com/gsi/client\" async defer\u003e\u003c/script\u003e\n  \u003cscript\u003e\t\t\n    function onSignout() {\n      google.accounts.id.disableAutoSelect();\n    }\n    function onRevoke(uid = '1618033988749895') {\n      google.accounts.id.revoke(uid, done =\u003e {\n        console.log(done.error);\n      });\n    }\n    function handleCredentialResponse(response) {\n      console.log(\"Encoded JWT ID token: \" + response.credential);\n      // Send to backend server and uthenticate user\n      // Confirm jwt token (backend) and get google userinfo from: https://oauth2.googleapis.com/tokeninfo?id_token={id_token}\n    }\n\n    window.onload = function () {\n      window.google.accounts.id.initialize({\n        client_id: \"\u003cGOOGLE_CLIENT_ID\u003e.apps.googleusercontent.com\",\n        callback: handleCredentialResponse,\n        itp_support: true\n      });\n      google.accounts.id.renderButton(\n        document.getElementById(\"buttonDiv\"),\n        { theme: \"outline\", size: \"large\" }\n      );\n      // google.accounts.id.prompt(); // also display the One Tap dialog\n      google.accounts.id.prompt((notification) =\u003e {\n        if (notification.isNotDisplayed()) {\n          console.log(notification.getNotDisplayedReason())\n        } else if (notification.isSkippedMoment()) {\n          console.log(notification.getSkippedReason())\n        } else if(notification.isDismissedMoment()) {\n          console.log(notification.getDismissedReason())\n        }\n\n        if (notification.isNotDisplayed() || notification.isSkippedMoment()) {\n          // try next provider if OneTap is not displayed or skipped\n        }\n      });\n    }\n  \u003c/script\u003e\n  \u003cdiv id=\"buttonDiv\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Przycisk z Html Api\n\nZmień google klient id: \u003cGOOGLE_CLIENT_ID\u003e.apps.googleusercont.com\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"pl\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"utf-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\u003c/meta\u003e\n\u003cbody\u003e\n  \u003cscript src=\"https://accounts.google.com/gsi/client\" async defer\u003e\u003c/script\u003e\n  \u003cscript\u003e\t\t\n    function onSignout() {\n      google.accounts.id.disableAutoSelect();\n    }\n    function handleCredentialResponse(response) {\n      console.log(\"Encoded JWT ID token: \" + response.credential);\n      // Send to backend server and uthenticate user\n      // Confirm jwt token (backend) and get google userinfo from: https://oauth2.googleapis.com/tokeninfo?id_token={id_token}\n    }\n  \u003c/script\u003e\n\n  \u003cdiv id=\"g_id_onload\" data-client_id=\"\u003cGOOGLE_CLIENT_ID\u003e.apps.googleusercontent.com\" data-context=\"signin\" data-ux_mode=\"popup\" data-callback=\"handleCredentialResponse\" data-nonce=\"\" data-itp_support=\"true\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"g_id_signin\" data-type=\"standard\" data-shape=\"rectangular\" data-theme=\"filled_blue\" data-text=\"signin_with,\" data-size=\"large\" data-logo_alignment=\"left\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## JWT token walidacja\n\nWalidacja tokena jwt w js lub na serverze backendowym i pobranie danych userinfo.\n\n```js\n// Validate jwt token on your backend server (this is sample with google server)\n// Login user on backend server with session\n// Return logged user detail from backend here\nasync function verifyTokenUserInfo(id_token) {\n\ttry {\n\t\t// Javascript (tests only)\n\t\t// JWT token validation with google server\n\t\tconst res = await axios.get(`https://oauth2.googleapis.com/tokeninfo?id_token=${id_token}`)\n\t\tconsole.log('Logged user detail', res)\n\t\treturn res.data\n    \n    \t\t// Server url\n    \t\tconst callback_url = '/oauth/google'\n\n\t\t// Laravel backend server JWT token validation with curl request to google url: https://oauth2.googleapis.com/tokeninfo?id_token=\n    \t\t// Login user on backend server and return userinfo details\n\t\tconst resb = await axios.get(`${callback_url}?id_token=${id_token}`)\n\t\tconsole.log('Logged user detail', resb)\n\t\treturn resb.data.userinfo\n\t} catch (err) {\n\t\tconsole.log('Login error', err)\n\t\tuser.value = null\n\t\treturn null\n\t}\n}\n```\n\n## Uruchom server Laravel\n\nDodaj w google+ api do klucza uri: http://localhost i http://localhost:8000 (Przy błędzie invalid origin ... puste okienko logowania)\n\n```sh\nphp artisan serve --host=localhost --port=8000\n```\n\n## Backend\n\n- JWT walidacja i pobranie google userinfo użytkownika zalogowanego z \u003chttps://oauth2.googleapis.com/tokeninfo?id_token={id_token}\u003e\n- Zalogowanie użytkownika na backendzie php\n- Ustawienie sessji, odesłanie danych zalogowanego usera\n- Dokumentacja: \u003chttps://developers.google.com/identity/sign-in/web/backend-auth?hl=pl\u003e\n\n## Images\n\u003cimg src=\"https://raw.githubusercontent.com/atomjoy/google-login-button/main/vue3/vue3-google-login.png\" width=\"100%\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomjoy%2Fgoogle-login-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatomjoy%2Fgoogle-login-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomjoy%2Fgoogle-login-button/lists"}