{"id":43364,"date":"2023-07-14T15:00:47","date_gmt":"2023-07-14T13:00:47","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=43364"},"modified":"2023-10-18T12:19:43","modified_gmt":"2023-10-18T10:19:43","slug":"google-one-click-login","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/google-one-click-login\/","title":{"rendered":"How to Add Google One-Click Login to Your WordPress Website"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]In today&#8217;s digital landscape, user convenience and seamless authentication experiences are crucial factors in determining the success of a website. For WordPress website owners, incorporating <strong>a user-friendly login system<\/strong> that simplifies the onboarding process is paramount. Among the various login options available, <strong>integrating a Google one-click login<\/strong> feature can significantly enhance user experience and attract a wider audience.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The traditional process of creating and managing user accounts in WordPress can be time-consuming and tedious, both for the website owners and their visitors. However, by implementing a Google one-click login functionality, you can streamline the authentication process, saving time and effort for both parties.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ve already discussed <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-facebook-login\/\">enabling Facebook login<\/a> through your website, and today we&#8217;ll cover setting up one-click Google login. We will discuss the following:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#why-add-google-one-click-login-to-your-site\">Why Add Google One-Click Login to Your Site?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#does-your-website-need-one-click-login\">Does Your Website Need One-Click Login?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-add-google-one-click-login\">How to Add Google One-Click Login?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"why-add-google-one-click-login-to-your-site\"><\/a>Why Add One-Click Google Login to Your Site?<\/h2>\n<p>[\/vc_column_text][vc_column_text]Adding a one-click Google login feature to your WordPress website brings numerous advantages that can enhance user experience, streamline the registration process, and boost the overall functionality of your site. Here are the two main reasons why you should consider incorporating this feature:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Simplified User Experience<\/h3>\n<p>[\/vc_column_text][vc_column_text]One-click Google login offers a hassle-free authentication method for your website visitors. With just a single click, users can <strong>bypass the need for manual account creation and login procedures<\/strong>. By leveraging their existing Google credentials, users can seamlessly log in to your WordPress site, eliminating the need to remember yet another username and password combination. This streamlined login process<strong> enhances user convenience and encourages higher user engagement<\/strong>, reducing friction and potential barriers to entry. As a result, visitors are more likely to stay on your site, explore its content, and even become loyal customers or subscribers.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Enhanced Security and Trust<\/h3>\n<p>[\/vc_column_text][vc_column_text]Integrating <strong>Google&#8217;s robust authentication system<\/strong> into your WordPress website adds an extra layer of security. Google&#8217;s login infrastructure employs advanced security measures, such as two-factor authentication and risk analysis, to protect user accounts. By leveraging Google&#8217;s security framework, you can leverage their expertise and infrastructure to safeguard user data, reducing the risk of unauthorized access and potential security breaches. This not only helps to protect your users&#8217; sensitive information but also instills a sense of trust and reliability in your website. Users are more likely to feel confident interacting with your site, knowing that their data is being protected by a trusted and reputable platform like Google.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"does-your-website-need-one-click-login\"><\/a>Does Your Website Need One-Click Google Login?<\/h2>\n<p>[\/vc_column_text][vc_column_text]That being said, not all WordPress websites need this feature. The one-click signup may not be particularly useful for simple blogs. However, there\u2019s a whole range of niches and industries that can benefit from it:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>eCommerce platforms:<\/strong> Online stores can greatly benefit from one-click Google login as it simplifies the registration and checkout process for customers. By allowing users to log in with their Google accounts, you eliminate the need for users to create new accounts or fill out lengthy registration forms. This streamlined experience can lead to higher conversion rates, increased customer satisfaction, and improved retention, as well as <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-reduce-shopping-cart-abandonment-in-wordpress\/\">help reduce cart abandonment rates<\/a>.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Education and eLearning platforms:<\/strong> Platforms that offer <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-create-an-online-course-with-wordpress\/\">online courses<\/a>, learning management systems, or educational resources can benefit from one-click Google login. Students and learners often prefer a streamlined login process, as it eliminates barriers to accessing educational content.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Community and membership websites:<\/strong> Websites that revolve around communities, memberships, or exclusive content can use one-click Google login to provide a frictionless experience for their members.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Service-based platforms:<\/strong> Websites that offer services such as <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-wordpress-booking-plugins\/\">booking functionality<\/a>, professional networks, online marketplaces (including websites for <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-sell-your-art-online-using-wordpress\/\">selling your art<\/a>) can benefit from one-click Google login.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]These are just a few examples, but in general, any website that aims to streamline the login and registration process, improve user experience, and enhance security can benefit from incorporating one-click Google login.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-add-google-one-click-login\"><\/a>How to Add Google One-Click Login?<\/h2>\n<p>[\/vc_column_text][vc_column_text]As usual, we will need the help of a plugin. Like we did for the Facebook login, we will be using <a href=\"https:\/\/wordpress.org\/plugins\/nextend-facebook-connect\/\" target=\"_blank\" rel=\"noopener\">Nextend Social Login and Register<\/a>, a freemium plugin whose free version allows you to add Google, Facebook and Twitter login, while the premium one allows PayPal, TikTok, Slack and other logins.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So, the first thing to do is to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">find, install and activate<\/a> the free Nextend plugin. When you\u2019re done, navigate to <em>Settings&gt;Nextend Social Login<\/em>. There you\u2019ll see the option for configuring Google login.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"477\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Getting-Started.jpg\" class=\"attachment-full size-full\" alt=\"Google Login Getting Started\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Getting-Started.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Getting-Started-300x148.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Getting-Started-768x378.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Getting-Started-620x305.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After clicking on <em>Getting Started<\/em>, a page will open on which you\u2019ll be prompted to create a Google app. It sounds scarier than it is but don\u2019t worry &#8211; it\u2019s very simple and we\u2019ll guide you through the process.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"488\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Create-Google-App.jpg\" class=\"attachment-full size-full\" alt=\"Create Google App\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Create-Google-App.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Create-Google-App-300x151.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Create-Google-App-768x387.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Create-Google-App-620x312.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Your next stop is the Google Cloud Console, specifically the APIs &amp; Services page. Start by clicking on <em>Create Project<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"416\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Create-Project.jpg\" class=\"attachment-full size-full\" alt=\"Google Login Create Project\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Create-Project.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Create-Project-300x129.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Create-Project-768x330.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Create-Project-620x266.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Here you can give your project a name &#8211; any name you like, and also select the organization, if you have any connected through Google Workspace. When you\u2019re done, click on <em>Create<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Create.jpg\" class=\"attachment-full size-full\" alt=\"Google Login Create\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Create.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Create-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Create-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Create-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]On the following screen, click on <em>OAuth consent screen<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"456\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/OAuth-Consent-Screen.jpg\" class=\"attachment-full size-full\" alt=\"OAuth Consent Screen\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/OAuth-Consent-Screen.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/OAuth-Consent-Screen-300x141.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/OAuth-Consent-Screen-768x361.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/OAuth-Consent-Screen-620x292.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The next step is to set the user type for the app. You have two choices &#8211; internal and external. The internal one allows access only to the individuals with login credentials within your organization. The external one allows access to any user with a Google account. Obviously, that\u2019s the one you should select.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-User-Type.jpg\" class=\"attachment-full size-full\" alt=\"Google Login User Type\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-User-Type.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-User-Type-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-User-Type-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-User-Type-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, you need to fill in some basic information. Start with giving the app a name (it can be any name you like) and registering your email. You can also upload a logo so that the users can easily associate the app with you. Note, however, that if you upload a logo it can undergo a lengthy verification process by Google, and it may take up to several weeks.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"562\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-App-Information.jpg\" class=\"attachment-full size-full\" alt=\"Google Login App Information\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-App-Information.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-App-Information-300x174.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-App-Information-768x445.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-App-Information-620x360.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]On the following page, you will enter your domain name, the link to your privacy policy page, and so on.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"564\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-App-Domain.jpg\" class=\"attachment-full size-full\" alt=\"Google Login App Domain\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-App-Domain.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-App-Domain-300x175.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-App-Domain-768x447.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-App-Domain-620x361.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Note that, in order to create an app for a website, you need to have a domain registered and potentially verified with Google Search Console. Enter the authorized domain by clicking on <em>Add Domain<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, enter your email and click on <em>Save and Continue<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The next screen is for determining the scopes of the app.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"566\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Edit-App-Registration.jpg\" class=\"attachment-full size-full\" alt=\"Google Login Edit App Registration\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Edit-App-Registration.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Edit-App-Registration-300x175.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Edit-App-Registration-768x449.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Edit-App-Registration-620x362.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You don\u2019t have to set anything particular here so you can just scroll down and click on <em>Save and Continue<\/em>. The same goes for the following page &#8211; <em>Test users<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The final page is the summary of what you\u2019ve set &#8211; the app name, type, domain, associated email and so on. Go through all these and edit whatever needs editing. If everything is fine, in the left hand dashboard menu, click on <em>Credentials<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"555\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Credentials.jpg\" class=\"attachment-full size-full\" alt=\"Google Login Credentials\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Credentials.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Credentials-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Credentials-768x440.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Credentials-620x355.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Here, click on <em>+Create Credentials<\/em> at the top menu bar and select <em>OAuth Client ID<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Create-Credentials.jpg\" class=\"attachment-full size-full\" alt=\"Google Login Create Credentials\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Create-Credentials.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Create-Credentials-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Create-Credentials-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Create-Credentials-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Open the <em>Application Type<\/em> menu and select <em>Web application<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"481\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Application-Type.jpg\" class=\"attachment-full size-full\" alt=\"Google Login Application Type\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Application-Type.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Application-Type-300x149.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Application-Type-768x381.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Application-Type-620x308.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now scroll down to <em>Authorized redirect URIs<\/em> and click on <em>+Add URI<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"562\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Add-URI.jpg\" class=\"attachment-full size-full\" alt=\"Google Login Add URI\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Add-URI.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Add-URI-300x174.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Add-URI-768x445.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Add-URI-620x360.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And now &#8211; and this is an important part &#8211; enter the following URI:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">http:\/\/example.com\/wp-login.php?loginSocial=google<\/code>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Just make sure to change \u201cexample.com\u201d to your own domain name!<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, scroll down and click on <em>Create<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You will see the following popup:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"690\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Popup.jpg\" class=\"attachment-full size-full\" alt=\"Google Login Popup\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Popup.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Popup-300x214.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Popup-768x547.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Popup-620x441.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You need the Client ID and Client secret keys because you will have to paste them into the plugin settings to connect the app with your website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Go back to your WordPress admin as you left it. Scroll down to the button saying<em> I am done setting up my Google App.<\/em>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"493\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Google Login Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Settings-300x153.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Settings-768x391.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Settings-620x315.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now paste your Client ID and Client Secret keys. Select whether you want to enable or disable the account select prompt for each login. When you\u2019re done, click on <em>Save Changes<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After this, you will be prompted to <em>Verify Settings<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If everything is fine, click on <em>Enable<\/em>. After this, you should get a message from Google saying <em>Works Fine &#8211; Enabled<\/em>. If not, you can re-verify the settings.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now that you\u2019ve configured and connected the app, you can configure the style of your login prompt. Start by clicking on <em>Buttons<\/em> in the menu.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here you can set the button skin, choosing between Dark, Light and Legacy. Here you will also specify the login label and link label.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"483\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Buttons.jpg\" class=\"attachment-full size-full\" alt=\"Google Login Buttons\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Buttons.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Buttons-300x150.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Buttons-768x383.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Buttons-620x309.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Click on<em> Save Changes<\/em> when you\u2019re done.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, after you\u2019ve connected and customized the login app, it\u2019s time to take it out of the test mode. Go back to Google Cloud and turn off the popup with keys.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Click on <em>OAuth Consent Screen<\/em> in the left hand dashboard menu. Find the button saying <em>Publish App<\/em>, click on it and then, in the popup, when asked to <em>Push to Production<\/em> in the popup, click on <em>Confirm<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You should see the status saying <em>Verification<\/em> not required.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"530\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Verification-Status.jpg\" class=\"attachment-full size-full\" alt=\"Google Login Verification Status\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Verification-Status.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Verification-Status-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Verification-Status-768x420.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Verification-Status-620x339.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This means that everything is fine and your users should now have the ability to log in with their Google credentials.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"580\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Final.jpg\" class=\"attachment-full size-full\" alt=\"Google Login Final\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Final.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Final-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Final-768x460.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/07\/Google-Login-Final-620x371.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Nextend plugin also allows you to create a shortcode that you can use to add the login form on any page of your site. This is convenient in case parts of your website are gated or behind a paywall or you have any other reason to require login for them.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Wrapping Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]Although it involves creating an app, adding Google one-click login to your website is actually not that complicated and shouldn\u2019t take more than 10 minutes of your time. Plus, it\u2019s free! So if adding Google login makes sense for you, there\u2019s really no reason why you wouldn\u2019t offer this convenient extra option to your users.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Speed, performance and reliability &#8211; these are the crucial things that a visitor expects from your website. There&#8217;s a lot you can do to guarantee that, and among those things the Google one-click login stands out as a obvious choice. In this detailed step-by-step tutorial, we&#8217;re guiding you through the process of adding it to your site<\/p>\n","protected":false},"author":3,"featured_media":43397,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[81,212,15,36],"class_list":["post-43364","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-google","tag-login","tag-plugins","tag-ux"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/43364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=43364"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/43364\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/43397"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=43364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=43364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=43364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}