{"id":990,"date":"2024-10-12T15:50:22","date_gmt":"2024-10-12T15:50:22","guid":{"rendered":"https:\/\/www.cmsgalaxy.com\/blog\/?p=990"},"modified":"2024-10-12T16:04:50","modified_gmt":"2024-10-12T16:04:50","slug":"how-to-configure-google-login-in-flarum","status":"publish","type":"post","link":"https:\/\/www.cmsgalaxy.com\/blog\/how-to-configure-google-login-in-flarum\/","title":{"rendered":"How to Configure Google Login in flarum?"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Using fof\/oauth<\/h2>\n\n\n\n<p>To configure <strong>Google Login<\/strong> in <strong>Flarum<\/strong> using the <strong>FoF OAuth<\/strong> extension, follow the step-by-step instructions below. This guide assumes that you have already installed the <strong>FoF OAuth<\/strong> extension and have access to the <strong>Google Developer Console<\/strong> to create OAuth credentials.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: <strong>Install the FoF OAuth Extension<\/strong><\/h3>\n\n\n\n<p>If you haven&#8217;t already installed the FoF OAuth extension, you can do so via Composer.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>SSH into your server<\/strong> where Flarum is installed and navigate to the Flarum root directory.<\/li>\n\n\n\n<li>Run the following command to install the <strong>FoF OAuth<\/strong> extension:<\/li>\n<\/ol>\n\n\n\n<p>Run the following command to install the <strong>FoF OAuth<\/strong> extension:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>composer require fof\/oauth<br><\/code><\/pre>\n\n\n\n<p>Once the installation is complete, <strong>clear Flarum\u2019s cache<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>php flarum cache:clear<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to your <strong>Flarum Admin Panel<\/strong> (<code>https:\/\/yourdomain.com\/admin<\/code>), navigate to the <strong>Extensions<\/strong> tab, and enable the <strong>FoF OAuth<\/strong> extension.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: <strong>Create Google OAuth Credentials<\/strong><\/h3>\n\n\n\n<p>You need to create Google OAuth 2.0 credentials for your Flarum forum to enable Google login.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Go to the Google API Console<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Visit the <a>Google Cloud Console<\/a>.<\/li>\n\n\n\n<li>Log in with your Google account.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Create a new project<\/strong>:\n<ul class=\"wp-block-list\">\n<li>In the top-right corner, click the <strong>Project dropdown<\/strong> and select <strong>New Project<\/strong>.<\/li>\n\n\n\n<li>Give your project a name (e.g., &#8220;Flarum Google Login&#8221;) and click <strong>Create<\/strong>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Enable the OAuth API<\/strong>:\n<ul class=\"wp-block-list\">\n<li>In the <strong>API Library<\/strong>, search for &#8220;Google Identity Platform&#8221;.<\/li>\n\n\n\n<li>Click <strong>Enable<\/strong>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Configure the OAuth Consent Screen<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Go to <strong>APIs &amp; Services > OAuth Consent Screen<\/strong> on the left sidebar.<\/li>\n\n\n\n<li>Choose <strong>External<\/strong> as the user type and click <strong>Create<\/strong>.<\/li>\n\n\n\n<li>Fill out the required fields, such as <strong>App name<\/strong>, <strong>User support email<\/strong>, and your <strong>developer contact email<\/strong>.<\/li>\n\n\n\n<li>Add scopes such as <code>email<\/code> and <code>profile<\/code>, which are needed to authenticate users.<\/li>\n\n\n\n<li>Save the configuration.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Create OAuth 2.0 Credentials<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Go to <strong>APIs &amp; Services > Credentials<\/strong>, then click <strong>Create Credentials<\/strong> and choose <strong>OAuth 2.0 Client IDs<\/strong>.<\/li>\n\n\n\n<li>Set the <strong>Application Type<\/strong> to <strong>Web Application<\/strong>.<\/li>\n\n\n\n<li>In <strong>Authorized redirect URIs<\/strong>, add the following URL (replace <code>yourdomain.com<\/code> with your actual domain): <code>https:\/\/yourdomain.com\/auth\/google\/callback<\/code><\/li>\n\n\n\n<li>Click <strong>Create<\/strong> and note down the <strong>Client ID<\/strong> and <strong>Client Secret<\/strong> that you receive, as you\u2019ll need them for the next step.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: <strong>Configure Google Login in Flarum<\/strong><\/h3>\n\n\n\n<p><strong>Configure Google OAuth<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>After installing the extension, go to your Flarum Admin Panel (<code>https:\/\/yourdomain.com\/admin<\/code>).<\/li>\n\n\n\n<li>Navigate to <strong>Extensions<\/strong>, find the <strong>FoF OAuth<\/strong> extension, and enable it.<\/li>\n\n\n\n<li>Configure the OAuth credentials by going to <strong>Settings > Login Providers > Google OAuth<\/strong> and entering the <strong>Client ID<\/strong> and <strong>Client Secret<\/strong> you generated earlier from the Google Developer Console.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"664\" src=\"https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2024\/10\/image-1024x664.png\" alt=\"\" class=\"wp-image-995\" srcset=\"https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2024\/10\/image-1024x664.png 1024w, https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2024\/10\/image-300x194.png 300w, https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2024\/10\/image-768x498.png 768w, https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2024\/10\/image.png 1321w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"682\" src=\"https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2024\/10\/image-2-1024x682.png\" alt=\"\" class=\"wp-image-999\" srcset=\"https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2024\/10\/image-2-1024x682.png 1024w, https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2024\/10\/image-2-300x200.png 300w, https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2024\/10\/image-2-768x512.png 768w, https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2024\/10\/image-2.png 1040w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Go to your Flarum Admin Panel<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Log in as an admin and navigate to the <strong>Settings<\/strong> page.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Find the OAuth Providers Section<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Scroll down to the <strong>Login Providers<\/strong> section.<\/li>\n\n\n\n<li>You should see the <strong>Google OAuth<\/strong> option provided by the <strong>FoF OAuth<\/strong> extension.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Enter the Google OAuth Credentials<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Enter the <strong>Client ID<\/strong> and <strong>Client Secret<\/strong> you obtained from the Google Developer Console in the respective fields.<\/li>\n\n\n\n<li>For the <strong>Redirect URL<\/strong>, it should be pre-configured as <code>https:\/\/yourdomain.com\/auth\/google\/callback<\/code>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Save the Changes<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Click <strong>Save<\/strong> to apply the changes.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"724\" src=\"https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2024\/10\/image-1-1024x724.png\" alt=\"\" class=\"wp-image-996\" srcset=\"https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2024\/10\/image-1-1024x724.png 1024w, https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2024\/10\/image-1-300x212.png 300w, https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2024\/10\/image-1-768x543.png 768w, https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2024\/10\/image-1.png 1176w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: <strong>Test the Google Login Integration<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Visit your Flarum Forum<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Go to your forum\u2019s homepage (<code>https:\/\/yourdomain.com<\/code>).<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Click on &#8220;Login&#8221;<\/strong>:\n<ul class=\"wp-block-list\">\n<li>On the login page, you should now see a <strong>Login with Google<\/strong> option.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Test the Google Login<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Click <strong>Login with Google<\/strong> and try signing in using a Google account.<\/li>\n\n\n\n<li>If everything is configured correctly, you should be able to log in using your Google credentials.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Using fof\/oauth To configure Google Login in Flarum using the FoF OAuth extension, follow the step-by-step instructions below. This guide<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-990","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/990","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/comments?post=990"}],"version-history":[{"count":4,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/990\/revisions"}],"predecessor-version":[{"id":1000,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/990\/revisions\/1000"}],"wp:attachment":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/media?parent=990"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/categories?post=990"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/tags?post=990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}