{"id":8112,"date":"2023-08-15T10:11:54","date_gmt":"2023-08-15T17:11:54","guid":{"rendered":"https:\/\/membermouse.com\/?post_type=ht_kb&#038;p=8112"},"modified":"2024-05-08T14:18:40","modified_gmt":"2024-05-08T18:18:40","slug":"configuracion-del-inicio-de-sesion-de-facebook-sso","status":"publish","type":"ht_kb","link":"https:\/\/membermouse.com\/es\/docs\/configuring-facebook-sso-login\/","title":{"rendered":"Configuraci\u00f3n del inicio de sesi\u00f3n SSO de Facebook"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/membermouse.com\/plans\/\"><mark style=\"background-color:#8ed1fc\" class=\"has-inline-color\">PLUS PLAN +<\/mark><\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The MemberMouse Facebook login extension will allow users to create a new free membership using their Facebook login credentials.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Please note that these instructions can require a different order for some or look different than shown. The Meta interface changes regularly, and each account will have verification requirements that may not be covered in this article. We encourage you to <a href=\"https:\/\/developers.facebook.com\/docs\/development\/create-an-app\/\" target=\"_blank\" rel=\"noopener nofollow\" title=\"\">read the documentation on Facebook<\/a> for further details.<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Creating a Facebook App<br><\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">The first step to enabling the Facebook login extension on your site is to create a Facebook App. To create your app, follow these steps:<\/p>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ol class=\"wp-block-list\">\n<li>To access Facebook's app developers page, visit http:\/\/developers.facebook.com\/apps. This is the page where Facebook lists your applications that you have already created with them. You can also create new apps here.<br><br><img decoding=\"async\" class=\"wp-image-10021\" style=\"width: 550px;\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/52a389b5-z4q0aoupsk7j5ho-1pcnth_vu5d4dpaydw.png\" alt=\"\"><br><br><\/li>\n\n\n\n<li>Facebook will ask you what kind of app you need to create. Choose Facebook Login.<br><br><img fetchpriority=\"high\" decoding=\"async\" width=\"650\" height=\"407\" class=\"wp-image-18822\" style=\"width: 650px;\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/e46fd203-fb1.png\" alt=\"\" srcset=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/e46fd203-fb1.png 1033w, https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/e46fd203-fb1-300x188.png 300w, https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/e46fd203-fb1-1024x641.png 1024w, https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/e46fd203-fb1-768x481.png 768w, https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/e46fd203-fb1-50x31.png 50w, https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/e46fd203-fb1-18x12.png 18w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><br><br><\/li>\n\n\n\n<li>Facebook may ask clarifying questions and then prompt you for application details:<br><br><img decoding=\"async\" class=\"wp-image-10022\" style=\"width: 650px;\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/09\/6454b6e3-gwf_rgkpwypimamreonv54jljxtuopzbuq.png\" alt=\"\"><br><br><\/li>\n\n\n\n<li>Once you have created the basic app, Facebook will walk you through a multi-step process to get the app connected to your site, verified, and then published. <br><br><br><img decoding=\"async\" width=\"650\" height=\"308\" class=\"wp-image-18823\" style=\"width: 650px;\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/123e0b6b-fb2.png\" alt=\"\" srcset=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/123e0b6b-fb2.png 974w, https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/123e0b6b-fb2-300x142.png 300w, https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/123e0b6b-fb2-768x363.png 768w, https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/123e0b6b-fb2-50x24.png 50w, https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/123e0b6b-fb2-18x9.png 18w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><br><\/li>\n\n\n\n<li>Each step may be unique to your situation and requirements, but the optional steps required for MemberMouse are included in the Client OAuth settings step.<br><br>In the Client OAuth settings step, check to make sure your toggle switches match the ones shown below, and use the Valid OAuth Redirect URI below, first modifying yoursite.com to match your MemberMouse domain. Click&nbsp;the <em>Save Changes<\/em> button once complete: &nbsp;<br><br><code>https:\/\/yoursite.com\/wp-content\/plugins\/membermouse\/lib\/hybridauth\/?hauth_done=Facebook<\/code><br><br><img decoding=\"async\" width=\"650\" height=\"452\" class=\"wp-image-18824\" style=\"width: 650px;\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/e4c6982e-fb3.png\" alt=\"\" srcset=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/e4c6982e-fb3.png 882w, https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/e4c6982e-fb3-300x209.png 300w, https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/e4c6982e-fb3-768x535.png 768w, https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/e4c6982e-fb3-50x35.png 50w, https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/e4c6982e-fb3-18x12.png 18w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><br><br><\/li>\n\n\n\n<li>Next, complete the setup steps with any verification and publishing Meta\/Facebook may require. <br><br><\/li>\n\n\n\n<li>Once your app is created and published, you will need to access the App ID and App Secret to configure the extension on your site. \u00a0These are accessible from\u00a0<em>App Settings > Basic<\/em>:<br><br><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"299\" class=\"wp-image-18825\" style=\"width: 650px;\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/c117b2d4-mm-support-test-login-app-settings-meta-for-developers.png\" alt=\"\" srcset=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/c117b2d4-mm-support-test-login-app-settings-meta-for-developers.png 1604w, https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/c117b2d4-mm-support-test-login-app-settings-meta-for-developers-300x138.png 300w, https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/c117b2d4-mm-support-test-login-app-settings-meta-for-developers-1024x471.png 1024w, https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/c117b2d4-mm-support-test-login-app-settings-meta-for-developers-768x353.png 768w, https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/c117b2d4-mm-support-test-login-app-settings-meta-for-developers-50x23.png 50w, https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/c117b2d4-mm-support-test-login-app-settings-meta-for-developers-1536x706.png 1536w, https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/c117b2d4-mm-support-test-login-app-settings-meta-for-developers-18x8.png 18w, https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/08\/c117b2d4-mm-support-test-login-app-settings-meta-for-developers-1200x551.png 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><br><br><\/li>\n\n\n\n<li>Open up a new tab on your web browser, and move to configuring the Facebook Login Extension.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Configuring the Facebook Login Extension<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">To enable the Facebook login extension, follow the steps below:<\/p>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In the MemberMouse menu, click on&nbsp;<em>General Settings<\/em>.<br><br><\/li>\n\n\n\n<li>Next, click on the&nbsp;<em>Extensions<\/em>&nbsp;tab and from the following page, click on the Facebook logo.<br><br><\/li>\n\n\n\n<li>You will need to provide some information from your Facebook app, as well as make a few selections:<br><br><img decoding=\"async\" class=\"wp-image-10031\" style=\"width: 450px;\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/09\/e8f05264-9056.png\" alt=\"\"><br><br><br><strong>App ID<\/strong>&nbsp;&#8211; From your Facebook app dashboard.<br><strong><br>App Secret<\/strong>&nbsp;&#8211; From your Facebook app dashboard.<br><strong><br>Allow Signups?<\/strong>&nbsp;&#8211; If you want to allow new customers to sign up using their Facebook login credentials, then click this box. Otherwise, members will only be able to login using their Facebook credentials, but not sign up for a new membership.<br><br><strong>Membership Level &#8211;&nbsp;<\/strong>Customers can only signup for a free membership level when they are using their Facebook login credentials. Once they are members, they can purchase a paid membership. You need to select the default free membership you would like customers to join when using Facebook.<br><strong><br>Callback URL:<\/strong>&nbsp;&#8211; This is the URL that is used in the Facebook App.<br><br><\/li>\n\n\n\n<li>Click&nbsp;<em>Save Configuration.<\/em><\/li>\n<\/ol>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Adding Facebook Signup and Login to your site<\/h5>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/09\/e2fd30b2-login-fb.png\"><img decoding=\"async\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/09\/e2fd30b2-login-fb.png\" alt=\"\" class=\"wp-image-10032\"\/><\/a><\/figure>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Once you have configured your site to accept Facebook login, you need to add the following SmartTags\u2122 to allow for signup and login:<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h6 class=\"wp-block-heading\">Signup Button SmartTag\u2122<\/h6>\n\n\n\n<p class=\"wp-block-paragraph\">The following SmartTag\u2122 generates a button that customers can use to sign up for a new account:<br><br><code>[MM_Social_Signup_Button provider='Facebook']<\/code><br><br><br><em><strong>Attributes:<\/strong><br><br><\/em>provider&nbsp;&#8211; Set the&nbsp;provider&nbsp;attribute to&nbsp;&#8216;all'&nbsp;to generate signup buttons for all active social login providers, or you can use an individual tag for each provider&nbsp;Twitter,&nbsp;Facebook&nbsp;and&nbsp;Google. For example:<br><br><code>[MM_Social_Signup_Button provider='all']<\/code><br><em><br><br><strong>Optional Attributes:<\/strong><br><\/em><br>membershipLevel&nbsp;&#8211; You can optionally use this attribute to override the default signup membership level<br>defined above. It takes a membership level ID for free membership levels only. For example:<br><br><code>[MM_Social_Signup_Button provider='Facebook' membershipLevel='2']<\/code><br><br>Read this article to&nbsp;<a href=\"https:\/\/membermouse.com\/docs\/finding-ids-for-membership-levels-products-and-bundles\/\">learn how to find your membership level IDs<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">&nbsp;<\/h3>\n\n\n\n<h6 class=\"wp-block-heading\">Login Button SmartTag\u2122<\/h6>\n\n\n\n<p class=\"wp-block-paragraph\">The following SmartTag\u2122 generates a button that customers can use to log into an existing account:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>[MM_Social_Login_Button provider='Facebook']<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><br><em><strong>Attributes:<\/strong><br><br><\/em>provider&nbsp;&#8211; Set the&nbsp;provider&nbsp;attribute to&nbsp;&#8216;all'&nbsp;to generate signup buttons for all active social login providers, or you can use an individual tag for each provider&nbsp;Twitter,&nbsp;Facebook&nbsp;and&nbsp;Google. For example:<strong><br><\/strong><br><code>[MM_Social_Login_Button provider='all']<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Troubleshooting<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>NOTE:&nbsp;<\/strong>The Facebook Client Library requires that the timezone be explicitly set in the PHP configuration. &nbsp;If you are setting directly in the php.ini file, a Central Timezone setting would look like this:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">date.timezone = &#8220;US\/Central&#8221;<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>PLAN PLUS + La extensi\u00f3n de inicio de sesi\u00f3n de Facebook de MemberMouse permitir\u00e1 a los usuarios crear una nueva suscripci\u00f3n gratuita utilizando sus credenciales de inicio de sesi\u00f3n de Facebook. Tenga en cuenta que estas instrucciones pueden requerir un...<\/p>","protected":false},"author":21411,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_strive_editorial_status":"not-started","_strive_copy_of":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"ht-kb-category":[193],"ht-kb-tag":[],"class_list":["post-8112","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-social-sign-on"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/ht-kb\/8112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/users\/21411"}],"replies":[{"embeddable":true,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/comments?post=8112"}],"version-history":[{"count":0,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/ht-kb\/8112\/revisions"}],"wp:attachment":[{"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/media?parent=8112"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/ht-kb-category?post=8112"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/membermouse.com\/es\/wp-json\/wp\/v2\/ht-kb-tag?post=8112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}