{"id":1338,"date":"2016-03-16T19:02:22","date_gmt":"2016-03-16T19:02:22","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=1338"},"modified":"2023-07-31T05:11:34","modified_gmt":"2023-07-31T05:11:34","slug":"login-with-google-account-using-javascript","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/login-with-google-account-using-javascript\/","title":{"rendered":"Login with Google Account using JavaScript"},"content":{"rendered":"<p>Login with Google OAuth library is a quick and powerful way to integrate login system in the web application. You can easily <a href=\"https:\/\/www.codexworld.com\/login-with-google-api-using-php\/\">integrate Google Sign-In on the website using PHP<\/a>. But, if you want to provide a user-friendly way to login with Google Account, the JavaScript client library is the best option. You can integrate Google login without page refresh using JavaScript OAuth library. Google JavaScript API client helps the user to login with their Google account on the third-party website.<\/p>\n<p><b>Google Identity API<\/b> lets you allow the user to login to your website with their Google account using JavaScript. The best advantage of using the Google JavaScript API library is that the login process can be implemented on a single page without page refresh. In this tutorial, we will show you how to integrate <b>Sign In with Google account using JavaScript<\/b> API client library and store the profile data in the database using PHP and MySQL.<\/p>\n<p>Before getting started to integrate Login with Google using JavaScript, take a look at the file structure.<\/p>\n<pre class=\"file-struc\">google_login_with_javascript<span style=\"color:#794938\">\/<\/span>\r\n\u251c\u2500\u2500 index.html\r\n\u251c\u2500\u2500 dbConfig.php\r\n\u2514\u2500\u2500 auth_init.php\r\n<\/pre>\n<h2>Create Google API Console Project<\/h2>\n<p>Before you begin to integrate Google sign-in into the website, create a Google API Console Project for generating Client ID. The Client ID is required to call the Google Sign-In JavaScript API.<\/p>\n<ul class=\"bullet_disk_list\">\n<li><a href=\"http:\/\/www.codexworld.com\/create-google-developers-console-project\/\">How to Create Google Developers Console Project<\/a><\/li>\n<\/ul>\n<p><span class=\"note\">Note that:<\/span> You must do the following settings on the Google API console project to access JavaScript API.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>In the OAuth Client settings, set <b>Authorized JavaScript origins<\/b> of the client application.<\/li>\n<\/ul>\n<p>Once the API Console Project is created successfully, copy the <b>Client ID<\/b> for later use in the script.<\/p>\n<div class=\"img_center\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3750\" src=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/03\/google-api-console-project-javascript-oauth-client-id-secret-codexworld.png\" alt=\"google-api-console-project-javascript-oauth-client-id-secret-codexworld\" width=\"995\" height=\"847\" srcset=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/03\/google-api-console-project-javascript-oauth-client-id-secret-codexworld.png 995w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/03\/google-api-console-project-javascript-oauth-client-id-secret-codexworld-300x255.png 300w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/03\/google-api-console-project-javascript-oauth-client-id-secret-codexworld-768x654.png 768w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/03\/google-api-console-project-javascript-oauth-client-id-secret-codexworld-200x170.png 200w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/03\/google-api-console-project-javascript-oauth-client-id-secret-codexworld-270x230.png 270w\" sizes=\"auto, (max-width: 995px) 100vw, 995px\" \/><\/div>\n<h2>Sign In With Google HTML API using JavaScript<\/h2>\n<p>The following functionality will be implemented to integrate the Google Login feature into the website using Google Identity API.<\/p>\n<ul>\n<li>Create an HTML element to render the Sign In With Google button.<\/li>\n<li>Attach Google OAuth dialog to button using Google HTML API.<\/li>\n<li>Post ID token to the server-side credential response handler script using JavaScript.<\/li>\n<li>Decode JWT token and retrieve user&#8217;s account information using PHP.<\/li>\n<li>Insert account data in the database using PHP and MySQL.<\/li>\n<li>Display Google account details on the web page without page refresh.<\/li>\n<\/ul>\n<h2>Create Database Table<\/h2>\n<p>A table is required in the database to store the user account information from Google. The following SQL creates a <code>users<\/code> table in the MySQL database to hold the Google profile information.<\/p>\n<pre style=\"color: rgb(0, 0, 0);\"><span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">CREATE<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">TABLE<\/span> <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`users`<\/span> (\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`id`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">int<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">11<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span> AUTO_INCREMENT,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`oauth_provider`<\/span> enum(<span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">'google'<\/span>,<span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">'facebook'<\/span>,<span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">'twitter'<\/span>,<span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">'linkedin'<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">'google'<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`oauth_uid`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">50<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`first_name`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">25<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`last_name`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">25<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`email`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">50<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`picture`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">255<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`created`<\/span> datetime <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`modified`<\/span> datetime <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  PRIMARY <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">KEY<\/span> (<span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`id`<\/span>)\r\n) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">ENGINE<\/span>=<span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">InnoDB<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">CHARSET<\/span>=utf8 <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span>=utf8_unicode_ci;<\/pre>\n<h2>Google Sign In with HTML API and JavaScript (index.html)<\/h2>\n<p>Since the example code uses HTML API, only one page (<code>index.html<\/code>) is required to add the <b>Sign In With Google<\/b> button and process Google account authentication without page refresh using JavaScript.<\/p>\n<p><b>Load Google Client Library:<\/b><br \/>\nInclude the Google Identity API Client library.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"https:\/\/accounts.google.com\/gsi\/client\"<\/span> <span class=\"hljs-attr\">async<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><b>Define HTML Elements:<\/b><br \/>\nCreate an element with ID <code>g_id_onload<\/code> and specify data attributes that are supported by Google HTML data attributes API. <\/p>\n<ul>\n<li><code>data-client_id<\/code>: Set the app&#8217;s client ID, which is created in the Google Developers Console.<\/li>\n<li><code>data-context<\/code>: Set the context type for the button text.\n<ul>\n<li>&#8220;signin&#8221; &#8211; Sign in with Google<\/li>\n<li>&#8220;signup&#8221; &#8211; Sign up with Google<\/li>\n<li>&#8220;use&#8221; &#8211; Use with Google<\/li>\n<\/ul>\n<\/li>\n<li><code>data-ux_mode<\/code>: Set the UX flow will be used by the Sign In With Google button.\n<ul>\n<li>&#8220;popup&#8221; &#8211; Perform sign-in UX flow in a pop-up window.<\/li>\n<li>&#8220;redirect&#8221; &#8211; Perform sign-in UX flow by page redirection.<\/li>\n<\/ul>\n<\/li>\n<li><code>data-callback<\/code>: Set a JavaScript function that handles the returned response token.<\/li>\n<li><code>data-auto_prompt<\/code>: Set true\/false to determine whether you want to display the Google One Tap login dialog.<\/li>\n<\/ul>\n<p>Create an element with class <code>g_id_signin<\/code> and specify the visual data attributes to render the Sign In With Google button.<\/p>\n<ul>\n<li><code>data-type<\/code>: Set the button type: &#8220;icon&#8221; or &#8220;standard&#8221; button.<\/li>\n<li><code>data-shape<\/code>: Set the button shape: &#8220;rectangular&#8221;, &#8220;pill&#8221;, &#8220;circle&#8221;, or &#8220;square&#8221;.<\/li>\n<li><code>data-theme<\/code>: Set the button theme: &#8220;outline&#8221;, &#8220;filled_blue&#8221;, or &#8220;filled_black&#8221;.<\/li>\n<li><code>data-text<\/code>: Set the button text: &#8220;signin_with&#8221;, &#8220;signup_with&#8221;, &#8220;continue_with&#8221;, or &#8220;signin&#8221;.<\/li>\n<li><code>data-size<\/code>: Set the button size: &#8220;large&#8221;, &#8220;medium&#8221;, or &#8220;small&#8221;.<\/li>\n<li><code>data-logo_alignment<\/code>: Set the alignment of the Google logo in the button: &#8220;left&#8221;, or &#8220;center&#8221;.<\/li>\n<\/ul>\n<p>Define an element (<code>.pro-data<\/code>) where the account data from Google profile info will be displayed.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Sign In With Google button with HTML data attributes API --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"g_id_onload\"<\/span>\r\n    <span class=\"hljs-attr\">data-client_id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"CLIENT_ID.apps.googleusercontent.com\"<\/span>\r\n    <span class=\"hljs-attr\">data-context<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"signin\"<\/span>\r\n    <span class=\"hljs-attr\">data-ux_mode<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"popup\"<\/span>\r\n    <span class=\"hljs-attr\">data-callback<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"handleCredentialResponse\"<\/span>\r\n    <span class=\"hljs-attr\">data-auto_prompt<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"false\"<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"g_id_signin\"<\/span>\r\n    <span class=\"hljs-attr\">data-type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"standard\"<\/span>\r\n    <span class=\"hljs-attr\">data-shape<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"rectangular\"<\/span>\r\n    <span class=\"hljs-attr\">data-theme<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"outline\"<\/span>\r\n    <span class=\"hljs-attr\">data-text<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"signin_with\"<\/span>\r\n    <span class=\"hljs-attr\">data-size<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"large\"<\/span>\r\n    <span class=\"hljs-attr\">data-logo_alignment<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"left\"<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Display the user's profile info --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"pro-data hidden\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span><\/pre>\n<p><b>Decode Response ID Token and Display Account Data from Google:<\/b><br \/>\nIn the following JavaScript code, we will get the credential token in the callback handler method and display the account information of the logged-in Google account.<\/p>\n<ul>\n<li>The <code>handleCredentialResponse()<\/code> function POST the ID token to the server-side script (<code>auth_init.php<\/code>) to decode JWT token and get the account info using JavaScript.\n<ul>\n<li>When this callback function is invoked, a CredentialResponse object is passed.<\/li>\n<li>In the credential response object, the credential field holds the ID token.<\/li>\n<li>This ID token is a base64-encoded JSON Web Token (JWT) string.<\/li>\n<li>This JWT token is passed to the server-side using JavaScript fetch method for decoding data.<\/li>\n<li>On success, the Google account data is returned as a response.<\/li>\n<\/ul>\n<\/li>\n<li>Display Google account details (Profile picture, Name, Email, and Account ID) in the specified element (<code>.pro-data<\/code>) of the web page.<\/li>\n<li>The <code>signOut()<\/code> function helps to Sign-Out the user from their Google account using JavaScript and display the Google Sign In button.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n<span style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Credential response handler function<\/span>\r\n<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">handleCredentialResponse<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">response<\/span>)<\/span>{\r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Post JWT token to server-side<\/span>\r\n    fetch(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"auth_init.php\"<\/span>, {\r\n        method: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"POST\"<\/span>,\r\n        headers: { <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Content-Type\"<\/span>: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"application\/json\"<\/span> },\r\n        body: <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">JSON<\/span>.stringify({ request_type:<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'user_auth'<\/span>, credential: response.credential }),\r\n    })\r\n    .then(response =&gt; response.json())\r\n    .then(data =&gt; {\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span>(data.status == <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1<\/span>){\r\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">let<\/span> responsePayload = data.pdata;\r\n\r\n            <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Display the user account data<\/span>\r\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">let<\/span> profileHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;h3&gt;Welcome '<\/span>+responsePayload.given_name+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'! &lt;a href=\"javascript:void(0);\" onclick=\"signOut('<\/span>+responsePayload.sub+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">');\"&gt;Sign out&lt;\/a&gt;&lt;\/h3&gt;'<\/span>;\r\n            profileHTML += <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;img src=\"'<\/span>+responsePayload.picture+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'\"\/&gt;&lt;p&gt;&lt;b&gt;Auth ID: &lt;\/b&gt;'<\/span>+responsePayload.sub+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/p&gt;&lt;p&gt;&lt;b&gt;Name: &lt;\/b&gt;'<\/span>+responsePayload.name+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/p&gt;&lt;p&gt;&lt;b&gt;Email: &lt;\/b&gt;'<\/span>+responsePayload.email+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/p&gt;'<\/span>;\r\n            <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementsByClassName(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"pro-data\"<\/span>)[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>].innerHTML = profileHTML;\r\n            \r\n            <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.querySelector(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#btnWrap\"<\/span>).classList.add(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"hidden\"<\/span>);\r\n            <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.querySelector(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\".pro-data\"<\/span>).classList.remove(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"hidden\"<\/span>);\r\n        }\r\n    })\r\n    .catch(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">console<\/span>.error);\r\n}\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Sign out the user<\/span>\r\n<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">signOut<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">authID<\/span>) <\/span>{\r\n    <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementsByClassName(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"pro-data\"<\/span>)[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>].innerHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>;\r\n    <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.querySelector(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#btnWrap\"<\/span>).classList.remove(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"hidden\"<\/span>);\r\n    <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.querySelector(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\".pro-data\"<\/span>).classList.add(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"hidden\"<\/span>);\r\n}<\/span>    \r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><b>Handle Element Visibility with CSS:<\/b><br \/>\nDefine CSS for the hidden class used in HTML elements to handle visibility.<\/p>\n<pre style=\"color: rgb(68, 68, 68);\"><span class=\"hljs-selector-class\" style=\"color: rgb(136, 0, 0);\">.hidden<\/span>{\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">display<\/span>: none;\r\n}<\/pre>\n<h2>Database Configuration (dbConfig.php)<\/h2>\n<p>The <code>dbConfig.php<\/code> file is used to connect and select the database. Specify the database host (<code>$dbHost<\/code>), username (<code>$dbUsername<\/code>), password (<code>$dbPassword<\/code>), and name (<code>$dbName<\/code>) as per your MySQL server credentials.<\/p>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Database&nbsp;configuration <br \/><\/span><span style=\"color: #0000BB\">$dbHost&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"localhost\"<\/span><span style=\"color: #007700\">; <br \/><\/span><span style=\"color: #0000BB\">$dbUsername&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"root\"<\/span><span style=\"color: #007700\">; <br \/><\/span><span style=\"color: #0000BB\">$dbPassword&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"root\"<\/span><span style=\"color: #007700\">; <br \/><\/span><span style=\"color: #0000BB\">$dbName&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"codexworld_db\"<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Create&nbsp;database&nbsp;connection <br \/><\/span><span style=\"color: #0000BB\">$db&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;new&nbsp;<\/span><span style=\"color: #0000BB\">mysqli<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$dbHost<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbUsername<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbPassword<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbName<\/span><span style=\"color: #007700\">); <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Check&nbsp;connection <br \/><\/span><span style=\"color: #007700\">if&nbsp;(<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">connect_error<\/span><span style=\"color: #007700\">)&nbsp;{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;die(<\/span><span style=\"color: #DD0000\">\"Connection&nbsp;failed:&nbsp;\"&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">connect_error<\/span><span style=\"color: #007700\">); <br \/>} <br \/> <br \/><\/span><span style=\"color: #0000BB\">?&gt;<\/span><\/pre>\n<h2>Decode JWT Token &#038; Store Data in Database (auth_init.php)<\/h2>\n<p>The <code>auth_init.php<\/code> file is loaded by the ID token response handler function (handleCredentialResponse) from the client-side.<\/p>\n<ul>\n<li>Decode response payload from JWT token using PHP.<\/li>\n<li>Retrieve account data from the Google ID token using json_decode() and base64_decode() in PHP.<\/li>\n<li>Check whether the user data already exist in the database based on the OAuth provider and ID.<\/li>\n<li>Insert or update the user data using PHP and MySQL.<\/li>\n<li>Return account data in JSON encoded format.<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Load&nbsp;the&nbsp;database&nbsp;configuration&nbsp;file <br \/><\/span><span style=\"color: #007700\">require_once&nbsp;<\/span><span style=\"color: #DD0000\">'dbConfig.php'<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Retrieve&nbsp;JSON&nbsp;from&nbsp;POST&nbsp;body <br \/><\/span><span style=\"color: #0000BB\">$jsonStr&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">file_get_contents<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'php:\/\/input'<\/span><span style=\"color: #007700\">); <br \/><\/span><span style=\"color: #0000BB\">$jsonObj&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">json_decode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$jsonStr<\/span><span style=\"color: #007700\">); <br \/> <br \/>if(!empty(<\/span><span style=\"color: #0000BB\">$jsonObj<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">request_type<\/span><span style=\"color: #007700\">)&nbsp;&amp;&amp;&nbsp;<\/span><span style=\"color: #0000BB\">$jsonObj<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">request_type&nbsp;<\/span><span style=\"color: #007700\">==&nbsp;<\/span><span style=\"color: #DD0000\">'user_auth'<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$credential&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$jsonObj<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">credential<\/span><span style=\"color: #007700\">)?<\/span><span style=\"color: #0000BB\">$jsonObj<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">credential<\/span><span style=\"color: #007700\">:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Decode&nbsp;response&nbsp;payload&nbsp;from&nbsp;JWT&nbsp;token <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">list(<\/span><span style=\"color: #0000BB\">$header<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$payload<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$signature<\/span><span style=\"color: #007700\">)&nbsp;=&nbsp;<\/span><span style=\"color: #0000BB\">explode&nbsp;<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\".\"<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$credential<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$responsePayload&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">json_decode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">base64_decode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$payload<\/span><span style=\"color: #007700\">)); <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(!empty(<\/span><span style=\"color: #0000BB\">$responsePayload<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;The&nbsp;user's&nbsp;profile&nbsp;info <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$oauth_provider&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'google'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$oauth_uid&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$responsePayload<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">sub<\/span><span style=\"color: #007700\">)?<\/span><span style=\"color: #0000BB\">$responsePayload<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">sub<\/span><span style=\"color: #007700\">:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$first_name&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$responsePayload<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">given_name<\/span><span style=\"color: #007700\">)?<\/span><span style=\"color: #0000BB\">$responsePayload<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">given_name<\/span><span style=\"color: #007700\">:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$last_name&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$responsePayload<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">family_name<\/span><span style=\"color: #007700\">)?<\/span><span style=\"color: #0000BB\">$responsePayload<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">family_name<\/span><span style=\"color: #007700\">:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$email&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$responsePayload<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">email<\/span><span style=\"color: #007700\">)?<\/span><span style=\"color: #0000BB\">$responsePayload<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">email<\/span><span style=\"color: #007700\">:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$picture&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$responsePayload<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">picture<\/span><span style=\"color: #007700\">)?<\/span><span style=\"color: #0000BB\">$responsePayload<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">picture<\/span><span style=\"color: #007700\">:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Check&nbsp;whether&nbsp;the&nbsp;user&nbsp;data&nbsp;already&nbsp;exist&nbsp;in&nbsp;the&nbsp;database <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$query&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"SELECT&nbsp;*&nbsp;FROM&nbsp;users&nbsp;WHERE&nbsp;oauth_provider&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$oauth_provider<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"'&nbsp;AND&nbsp;oauth_uid&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$oauth_uid<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"'\"<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$result&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">query<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$query<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">$result<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">num_rows&nbsp;<\/span><span style=\"color: #007700\">&gt;&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">){&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Update&nbsp;user&nbsp;data&nbsp;if&nbsp;already&nbsp;exists <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$query&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"UPDATE&nbsp;users&nbsp;SET&nbsp;first_name&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$first_name<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;last_name&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$last_name<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;email&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$email<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;picture&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$picture<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;modified&nbsp;=&nbsp;NOW()&nbsp;WHERE&nbsp;oauth_provider&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$oauth_provider<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"'&nbsp;AND&nbsp;oauth_uid&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$oauth_uid<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"'\"<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$update&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">query<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$query<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Insert&nbsp;user&nbsp;data <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$query&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"INSERT&nbsp;INTO&nbsp;users&nbsp;VALUES&nbsp;(NULL,&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$oauth_provider<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$oauth_uid<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$first_name<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$last_name<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$email<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$picture<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;NOW(),&nbsp;NOW())\"<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$insert&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">query<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$query<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$output&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;[ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'status'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'msg'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'Account&nbsp;data&nbsp;inserted&nbsp;successfully!'<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'pdata'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">$responsePayload <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$output<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">([<\/span><span style=\"color: #DD0000\">'error'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'Account&nbsp;data&nbsp;is&nbsp;not&nbsp;available!'<\/span><span style=\"color: #007700\">]); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>} <br \/><\/span><span style=\"color: #0000BB\">?&gt;<\/span><\/pre>\n<h2>Google One Tap Login<\/h2>\n<p>If you want to integrate Google One Tap Sign-In in the web application, use the <code>data-auto_prompt<\/code> attribute in the <code>g_id_onload<\/code> element.<\/p>\n<ul>\n<li>Set the <code>data-auto_prompt<\/code> to <b>true<\/b>, it will display Google One tap prompt dialog.<\/li>\n<li>Use the <code>data-auto_select<\/code> attribute and set it to <b>true<\/b>, it will enable automatic account selection on Google One Tap.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"g_id_onload\"<\/span>\r\n    <span class=\"hljs-attr\">data-client_id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"CLIENT_ID.apps.googleusercontent.com\"<\/span>\r\n    <span class=\"hljs-attr\">data-context<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"signin\"<\/span>\r\n    <span class=\"hljs-attr\">data-ux_mode<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"popup\"<\/span>\r\n    <span class=\"hljs-attr\">data-callback<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"handleCredentialResponse\"<\/span>\r\n    <b><span class=\"hljs-attr\">data-auto_prompt<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"true\"<\/span><\/b>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span><\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/login-with-google-account-in-codeigniter\/\">Login with Google Account in CodeIgniter<\/a><\/p>\n<h2>Conclusion<\/h2>\n<p><b>Google Sing-in with JavaScript<\/b> is the instant way to add user login functionality to the website. In the example code, we have made it simple to integrate Google Login without page refresh using JavaScript. This script will help to make your social login system user-friendly because the user can log in with their Google account on the dialog window without leaving the web page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Login with Google OAuth library is a quick and powerful way to integrate login system in the web application. You can easily integrate Google Sign-In on the website using PHP. But, if you want to <\/p>\n","protected":false},"author":1,"featured_media":5416,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[10],"tags":[250,13,112,111,66,14,133],"class_list":["post-1338","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-api","tag-google-api","tag-google-login","tag-google-oauth","tag-javascript","tag-php","tag-social-login","cat-10-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Login with Google Account using JavaScript - CodexWorld<\/title>\n<meta name=\"description\" content=\"Sign In with Google Account using JavaScript - Login with Google Account without page refresh using Google Identity API and JavaScript client library. Integrate login with Google account with HTML API and store the profile data in the database using JavaScript, PHP, and MySQL.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/login-with-google-account-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Login with Google Account using JavaScript - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Sign In with Google Account using JavaScript - Login with Google Account without page refresh using Google Identity API and JavaScript client library. Integrate login with Google account with HTML API and store the profile data in the database using JavaScript, PHP, and MySQL.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/login-with-google-account-using-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2016-03-16T19:02:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-31T05:11:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/03\/login-with-google-sign-in-identity-html-api-client-library-using-javascript-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-google-account-using-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-google-account-using-javascript\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Login with Google Account using JavaScript\",\"datePublished\":\"2016-03-16T19:02:22+00:00\",\"dateModified\":\"2023-07-31T05:11:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-google-account-using-javascript\\\/\"},\"wordCount\":1073,\"commentCount\":8,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-google-account-using-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/login-with-google-sign-in-identity-html-api-client-library-using-javascript-codexworld.png\",\"keywords\":[\"API\",\"Google API\",\"Google Login\",\"Google oAuth\",\"JavaScript\",\"PHP\",\"Social Login\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/login-with-google-account-using-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-google-account-using-javascript\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-google-account-using-javascript\\\/\",\"name\":\"Login with Google Account using JavaScript - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-google-account-using-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-google-account-using-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/login-with-google-sign-in-identity-html-api-client-library-using-javascript-codexworld.png\",\"datePublished\":\"2016-03-16T19:02:22+00:00\",\"dateModified\":\"2023-07-31T05:11:34+00:00\",\"description\":\"Sign In with Google Account using JavaScript - Login with Google Account without page refresh using Google Identity API and JavaScript client library. Integrate login with Google account with HTML API and store the profile data in the database using JavaScript, PHP, and MySQL.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-google-account-using-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/login-with-google-account-using-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-google-account-using-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/login-with-google-sign-in-identity-html-api-client-library-using-javascript-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/login-with-google-sign-in-identity-html-api-client-library-using-javascript-codexworld.png\",\"width\":1920,\"height\":1080,\"caption\":\"login-with-google-sign-in-identity-html-api-client-library-using-javascript-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-google-account-using-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Login with Google Account using JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Login with Google Account using JavaScript - CodexWorld","description":"Sign In with Google Account using JavaScript - Login with Google Account without page refresh using Google Identity API and JavaScript client library. Integrate login with Google account with HTML API and store the profile data in the database using JavaScript, PHP, and MySQL.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/login-with-google-account-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Login with Google Account using JavaScript - CodexWorld","og_description":"Sign In with Google Account using JavaScript - Login with Google Account without page refresh using Google Identity API and JavaScript client library. Integrate login with Google account with HTML API and store the profile data in the database using JavaScript, PHP, and MySQL.","og_url":"https:\/\/www.codexworld.com\/login-with-google-account-using-javascript\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2016-03-16T19:02:22+00:00","article_modified_time":"2023-07-31T05:11:34+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/03\/login-with-google-sign-in-identity-html-api-client-library-using-javascript-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/login-with-google-account-using-javascript\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/login-with-google-account-using-javascript\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Login with Google Account using JavaScript","datePublished":"2016-03-16T19:02:22+00:00","dateModified":"2023-07-31T05:11:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/login-with-google-account-using-javascript\/"},"wordCount":1073,"commentCount":8,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/login-with-google-account-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/03\/login-with-google-sign-in-identity-html-api-client-library-using-javascript-codexworld.png","keywords":["API","Google API","Google Login","Google oAuth","JavaScript","PHP","Social Login"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/login-with-google-account-using-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/login-with-google-account-using-javascript\/","url":"https:\/\/www.codexworld.com\/login-with-google-account-using-javascript\/","name":"Login with Google Account using JavaScript - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/login-with-google-account-using-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/login-with-google-account-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/03\/login-with-google-sign-in-identity-html-api-client-library-using-javascript-codexworld.png","datePublished":"2016-03-16T19:02:22+00:00","dateModified":"2023-07-31T05:11:34+00:00","description":"Sign In with Google Account using JavaScript - Login with Google Account without page refresh using Google Identity API and JavaScript client library. Integrate login with Google account with HTML API and store the profile data in the database using JavaScript, PHP, and MySQL.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/login-with-google-account-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/login-with-google-account-using-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/login-with-google-account-using-javascript\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/03\/login-with-google-sign-in-identity-html-api-client-library-using-javascript-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/03\/login-with-google-sign-in-identity-html-api-client-library-using-javascript-codexworld.png","width":1920,"height":1080,"caption":"login-with-google-sign-in-identity-html-api-client-library-using-javascript-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/login-with-google-account-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Login with Google Account using JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/03\/login-with-google-sign-in-identity-html-api-client-library-using-javascript-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-lA","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=1338"}],"version-history":[{"count":10,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1338\/revisions"}],"predecessor-version":[{"id":5415,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1338\/revisions\/5415"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/5416"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=1338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=1338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=1338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}