狐狸聚合登录 对接详细教程

CeoMax总裁主题

一、下载 wordpress 插件并安装

1. 下载 wordpress 专用插件

2. 进入网站后台上传安装下载的插件，安装后在插件列表启用 Clogin Passport 插件

二、填写插件所需参数

打开聚合登录插件，填写创建完成后的应用数据

• 接口地址：https://u.foxccs.com/
• APPID：[填写：狐狸聚合登录后台“创建应用”后查看“应用详情”]
• APPKEY：[填写：狐狸聚合登录后台“创建应用”后查看“应用详情”]
• 开启的登录方式：（根据需求选择开启）
• 头像优先级：9999（默认）
• 自动注册：建议启用（意思是如果没有绑定社交账户，则自动注册新的账户）

注：如果启用自动注册则在 设置 > 常规 > 成员资格 启用任何人都可以注册，并保存更改；

三、为登录页添加登录按钮

网站后台 网站快捷登录 插件 > 开发文档 > 如何输出第三方登录列表（代码如下）

登录页：快捷登录按钮代码

<div class="ceo-login-qq">
<div class="ceo-login-other">第三方账号登录</div>
<?php do_action('clogin-passport'); ?>
<?php 
ob_start();
do_action('clogin-passport'); 
$codes = ob_get_contents();
ob_end_clean();
?>
</div>

注册页：快捷登录按钮代码

<div class="ceo-login-qq">
<div class="ceo-login-other">第三方账号登录</div>
<?php do_action('clogin-passport'); ?>
<?php 
ob_start();
do_action('clogin-passport'); 
$codes = ob_get_contents();
ob_end_clean();
?>
</div>

分别复制代码打开文件 /themes/ceomax/template-parts/navbar/navbar-login.php (搜索 “立即登录” 和 “立即注册” )

粘贴到下方图示即可（当然你也可以根据自己需求放置其它地方），如下图：

四、为用户个人中心添加绑定按钮

网站后台 网站快捷登录 插件 > 开发文档 > 如何调用绑定社交账号的按钮（代码如下）

个人中心：绑定按钮代码

<?php
if (!function_exists('get_user_to_edit')) include(ABSPATH . '/wp-admin/includes/user.php');
do_action( 'binding_social_media_account', get_user_to_edit(get_current_user_id()) );
?>

复制代码，进入 /themes/ceomax/user/action/security.php

粘贴到下面邮箱下面即可（当然你也可以根据自己需求放置其它地方），如下图：

五、美化登录页和个人中心按钮

打开所需修改文件 plugins\clogin-passport\clogin-passport.php （登录页及个人中心美化均在此文件修改）

1、美化登录页面按钮

删除代码或者注释掉 _{注：此操作是删除多余“第三方登录”文字。}

<p class="third-party-login-label"><label><?php _e('Third-Party Login', $this->text_domain); ?></label></p>

修复图标背景错位问题

	#clogin-passport-container a {
		display: inline-block;
		padding: 3px;
		background: #f7f7f7;
		border-radius: 50%;
		width: 32px;
		height: 32px;
		position: relative;
		box-sizing: initial;
		margin: 3px;
		left: 0;
		top: 0;
		line-height: 1;
    box-shadow: 0 5px 10px 0 rgb(16 110 253 / 30%);
	}

注：添加“line-height: 1;”这行代码，使图标和背景不错位作用。
注：添加“box-shadow: 0 5px 10px 0 rgb(16 110 253 / 30%);”这行代码，使图标背景产生阴影。

2、美化个人中心绑定

删除代码或者注释掉 _{注：此操作删除多余“社交媒体账户”文字。}

<h3><?php _e( 'Social Media Accounts', $this->text_domain ); ?></h3>

替换class

		<tr>
			<th><label><?php _e($this->modules_name[$type], $this->text_domain); ?></label></th>
			<td>
			<?php
				$openid = get_user_meta( $profileuser->ID, 'clogin_passport_'.$type, true );
				if (empty($openid)) {
?>
					<a class="button button-primary user-user-submit change-color b-r-4 ceo-button ceo-button-small" href="<?php echo $bind_url; ?>"><?php _e('Bind Now', $this->text_domain); ?></a>
<?php
				} else {
?>
					<a class="button button-primary user-user-submit change-color b-r-4 ceo-button ceo-button-small" href="<?php echo $bind_url; ?>" title="<?php echo $openid; ?>"><?php _e('Rebind', $this->text_domain); ?></a>
<?php
				}
?>
			</td>
		</tr>

注：仅更改了“button button-primary user-user-submit change-color b-r-4 ceo-button ceo-button-small”此处（对比自己代码即可）。

六、扩展 – 页面模式添加登录按钮

总裁主题登录页分为 弹窗模式 和 页面模式 ；
上述教程已为 弹窗模式 添加快捷登录按钮，下面教程为 页面模式 添加登录按钮。

注册页代码

<div class="ceo-login-qq">
<?php do_action('clogin-passport'); ?>
<?php 
ob_start();
do_action('clogin-passport'); 
$codes = ob_get_contents();
ob_end_clean();
?>
</div>

复制以上代码进入 /themes/ceomax/user/login/register.php （搜索 “欢迎来到” ）

粘贴至下图所示位置

登录页代码

<div class="ceo-login-qq">
<?php do_action('clogin-passport'); ?>
<?php 
ob_start();
do_action('clogin-passport'); 
$codes = ob_get_contents();
ob_end_clean();
?>
</div>

复制以上代码进入 /themes/ceomax/user/login/login.php 粘贴至下图所示位置（搜索 “欢迎来到” ）

1 2 3 4 5