• 欢迎访问乐趣公园网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入乐趣公园 QQ群
  • Git主题现已支持PHP7版本,速度应该会提高不少,不过云落的网站本来就很快了,所以感觉不是太明显
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏乐趣公园吧
  • 云落的淘宝店铺已经开张了哦,传送门:https://kimipet.taobao.com

允许用户通过Github账号登录WordPress网站

WordPress 云落 3年前 (2015-03-12) 484次浏览 已收录 5个评论
文章目录[隐藏]

如何将一个 GitHub 登录按钮添加到 WordPress 主题里面 — — 本教程是为希望添加此功能使用户可以使用其 GitHub 凭据登录到您的站点,而不是需要注册一个帐户并使用正常的 WordPress 登录过程。

允许用户通过 Github 账号登录 WordPress 网站

创建 Github OAuth for WordPress 库文件

保存本段代码命名为githuboauth.php,然后保存在主题根目录

<?php

session_start();

function apiRequest($url, $post=FALSE, $headers=array()) {
  $ch = curl_init($url);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
 
  if($post)
    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($post));
 
  $headers[] = 'Accept: application/json';
 
  if(session('access_token'))
    $headers[] = 'Authorization: Bearer ' . session('access_token');
 
  curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

  curl_setopt($ch, CURLOPT_USERAGENT, get_option("github_app_name")); 
 
  $response = curl_exec($ch);

  return json_decode($response);
}

function GithubApiRequest($url, $post=FALSE, $headers=array()) {
  $ch = curl_init($url);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
 
  if($post)
    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($post));
 
  $headers[] = 'Accept: application/json';
 
  if(session('access_token'))
    $headers[] = 'Authorization: Bearer ' . get_user_meta(get_current_user_id(), "github_access_token", TRUE);
 
  curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

  curl_setopt($ch, CURLOPT_USERAGENT, get_option("github_app_name")); 
 
  $response = curl_exec($ch);

  return json_decode($response);
}

function generateRandomString($length = 10) {
    $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    $randomString = '';
    for ($i = 0; $i < $length; $i++) {
        $randomString .= $characters[rand(0, strlen($characters) - 1)];
    }
    return $randomString;
} 

function get($key, $default=NULL) {
  return array_key_exists($key, $_GET) ? $_GET[$key] : $default;
}
 
function session($key, $default=NULL) {
  return array_key_exists($key, $_SESSION) ? $_SESSION[$key] : $default;
}

function github_oauth_redirect()
{
	global $wp, $wp_query, $wp_the_query, $wp_rewrite, $wp_did_header;
	require_once("../wp-load.php");

	$authorizeURL = 'https://github.com/login/oauth/authorize';
	$tokenURL = 'https://github.com/login/oauth/access_token';
	$apiURLBase = 'https://api.github.com/';

	define('OAUTH2_CLIENT_ID', get_option("github_key"));
	define('OAUTH2_CLIENT_SECRET', get_option("github_secret"));

	$_SESSION['state'] = hash('sha256', microtime(TRUE).rand().$_SERVER['REMOTE_ADDR']);
	unset($_SESSION['access_token']);
	$params = array(
    	'client_id' => OAUTH2_CLIENT_ID,
    	'redirect_uri' => get_site_url() . '/wp-admin/admin-ajax.php?action=github_oauth_callback',
    	'scope' => 'user',
    	'state' => $_SESSION['state']
  	);

  	header('Location: ' . $authorizeURL . '?' . http_build_query($params));

	die();
}

add_action("wp_ajax_github_oauth_redirect", "github_oauth_redirect");
add_action("wp_ajax_nopriv_github_oauth_redirect", "github_oauth_redirect");

function github_oauth_callback()
{
	global $wp, $wp_query, $wp_the_query, $wp_rewrite, $wp_did_header;
	require_once("../wp-load.php");

	$authorizeURL = 'https://github.com/login/oauth/authorize';
	$tokenURL = 'https://github.com/login/oauth/access_token';
	$apiURLBase = 'https://api.github.com/';

	define('OAUTH2_CLIENT_ID', get_option("github_key"));
	define('OAUTH2_CLIENT_SECRET', get_option("github_secret"));

	if(get('code')) {
  		if(!get('state') || $_SESSION['state'] != get('state')) {
    		header('Location: ' . $_SERVER['PHP_SELF']);
    		die();
  		}
  	}

  	$token = apiRequest($tokenURL, array(
	    'client_id' => OAUTH2_CLIENT_ID,
	    'client_secret' => OAUTH2_CLIENT_SECRET,
	    'redirect_uri' => get_site_url() . '/wp-admin/admin-ajax.php?action=github_oauth_callback',
	    'state' => $_SESSION['state'],
	    'code' => get('code')
  	));

 	$_SESSION['access_token'] = $token->access_token;


 	if(session('access_token')) 
 	{
	  	$user = apiRequest($apiURLBase . 'user');
	  	$email = $user->email;
	  	$username = $user->login;

	  	if(username_exists($username))
		{
			$user_id = username_exists($username);
			wp_set_auth_cookie($user_id);
			update_user_meta($user_id, "github_access_token", $_SESSION["access_token"]);
			header('Location: ' . get_site_url());
		}
		else
		{
			//create a new account and then login
			wp_create_user($username, generateRandomString(), $email);
			$user_id = username_exists($username);
			wp_set_auth_cookie($user_id);
			update_user_meta($user_id, "github_access_token", $_SESSION["access_token"]);
			header('Location: ' . get_site_url());
		}
 	}
 	else 
 	{
  		header('Location: ' . get_site_url());
  	}
	die();
}

add_action("wp_ajax_github_oauth_callback", "github_oauth_callback");
add_action("wp_ajax_nopriv_github_oauth_callback", "github_oauth_callback");

引入库文件

现在应该将库文件加载到你的 WordPress 里面,一般在functions.php文件里面引入

require_once( "githuboauth.php" );

将用户重定向

当用户单击在 GitHub 登录按钮的时候,您需要重定向到用户,重定向的 URL 就是这个:

site_url() . "/wp-admin/admin-ajax.php?action=github_oauth_redirect"

此 URL 将处理所有的标志在 GitHub 的核心功能。一旦用户已登录,用户将被重定向到网站的主页。

创建一个 GitHub 的应用程序

这个和创建微博应用差不多吧
在创建一个 Github 的应用程序时,Github 会要求回调 URL。
我们一般是是用 http://yourdomain.com/wp-admin/admin-ajax.php?action=github_oauth_callback 作为回调 URL。
代码就是

get_site_url() . '/wp-admin/admin-ajax.php?action=github_oauth_callback'

一旦他们已经创建他们需要复制的客户机 ID,客户端的秘密和应用程序的名称从 GitHub 的应用程序的仪表板并将它们存储为 WordPress 选项 GitHub 应用程序。
我们使用下面的选项名称存储的选项值。

update_option( "github_key", $client_id_variable );
update_option( "github_secret", $client_secret_variable );
update_option( "github_app_name", $github_app_name_variable );

这时候你需要做一个 GitHub 登录按钮在您的主题。让我们创建一个显示 GitHub 登录按钮的 GitHub 登录小部件。

GitHub 登录窗口小部件

将下面这段代码添加进functions.php文件,效果嘛,就是给 WordPress 外观——小工具,添加一个 Github 登录框。

class GitHub_Login_Widget extends WP_Widget 
{
    public function __construct() 
    {
        parent::__construct( "Github_login_widget", "GitHub Login", array( "description" => __("Display a GitHub Login Button" ) ) );
    }

    public function form( $instance ) {

        if ( $instance )  {

            $title = esc_attr( $instance['title'] );
            $api_key = $instance['api_key'];
            $secret_key = $instance['secret_key'];
            $github_app_name = $instance['github_app_name'];

        } else {

            $title = '';
            $api_key = '';
            $secret_key = '';
            $github_app_name = '';

        }
        ?>

        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php echo "Title"; ?></label>  
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $title; ?>" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id( 'api_key' ); ?>"><?php echo "Client Id"; ?></label>
            <input type="text" class="widefat" id="<?php echo $this->get_field_id( 'api_key' ); ?>" name="<?php echo $this->get_field_name( 'api_key' ); ?>" value="<?php echo $api_key; ?>" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id( 'secret_key' ); ?>"><?php echo "Secret Key"; ?></label>
            <input type="text" class="widefat" id="<?php echo $this->get_field_id( 'secret_key' ); ?>" name="<?php echo $this->get_field_name( 'secret_key' ); ?>" value="<?php echo $secret_key; ?>" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id( 'github_app_name' ); ?>"><?php echo "App Name"; ?></label>
            <input type="text" class="widefat" id="<?php echo $this->get_field_id( 'github_app_name' ); ?>" name="<?php echo $this->get_field_name( 'github_app_name' ); ?>" value="<?php echo $github_app_name; ?>" />
        </p>

        <p>
            While creating a Github app use "<?php echo get_site_url() . '/wp-admin/admin-ajax.php?action=github_oauth_callback';  ?>" as callback URL.
        </p>

        <?php
    }

    public function update( $new_instance, $old_instance ) 
    {
        $instance = $old_instance;
        $instance['title'] = strip_tags( $new_instance['title'] );
        $instance['api_key'] = strip_tags( $new_instance['api_key'] );
        $instance['secret_key'] = strip_tags( $new_instance['secret_key'] );
        $instance['github_app_name'] = strip_tags( $new_instance['github_app_name'] );
        update_option( "github_key", $new_instance['api_key'] );
        update_option( "github_secret", $new_instance['secret_key'] );
        update_option( "github_app_name", $new_instance['github_app_name'] );
        return $instance;
    }

    public function widget( $args, $instance ) 
    {
        extract($args);

        $title = apply_filters( 'widget_title', $instance['title'] );
        echo $before_widget;

        if ( $title ) {
            echo $before_title . $title . $after_title ;
        }

        if ( is_user_logged_in() ) {
            ?>
                <a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="Logout"><input type="button" value="Logout" /></a>
            <?php
        } else {
            ?>
                <a href="<?php echo site_url() . '/wp-admin/admin-ajax.php?action=github_oauth_redirect'; ?>"><input type="button" value="Login Using Github" /></a>
            <?php
        }
        echo $after_widget;
    }
}
register_widget( "GitHub_Login_Widget" );

现在回头看看我们做了哪些

  • 我们首先包括了 GitHub 的 OAuth 的库。
  • 然后,我们创建了一个在后端显示在前端和显示按键输入框一个登录按钮控件。
  • 当用户提交表单控件后端上的值保存为 WordPress 的选项。
  • 当有人点击上的小部件的前端 GitHub 的登录按钮,用户被重定向到 URL 重定向如上所述。重定向 URL 处理所有的登录任务。

现在访问“外观” > “小工具”,你会看到 Github 上登录窗口小部件,把它和输入所需的客户端 ID,密钥和回调 URL。

允许用户通过 Github 账号登录 WordPress 网站

访问该网站,你会看到登录按钮:

允许用户通过 Github 账号登录 WordPress 网站

点击登录将采取用户到 Github 的网站,在那里他们可以登录,这样做后,他们将返回到你的网站,并登录到 WordPress 的。

允许用户通过 Github 账号登录 WordPress 网站

相关链接

创建一个全新的 Github 应用
乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:允许用户通过 Github 账号登录 WordPress 网站
喜欢 (0)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(5)个小伙伴在吐槽
  1. 站长什么时候写一个集成第三方平台比如QQ登录功能的文章?网上好像没有搜了半天,只有介绍插件的!
    黑苹果乐园2015-04-25 20:23 回复 Windows XP | Chrome 38.0.2125.122
  2. 云落
    哈哈,你的logo和这篇文章很配啊
    云落2015-04-16 14:47 回复 Android 4.4.4 | WordPress客户端 android
  3. 这个可以折腾下 :mrgreen:
    威威丶ww2015-03-12 23:32 回复 Windows 7 | 搜狗浏览器 2.X