实现 Facebook 第三方授权登录

最近做项目要实现Facebook的第三方登录,这简单的记录一下。

目前Facebook的第三方登录有很多方案,且官方提供SDK方便接入。但是我这个项目同时要实现网页和客户端。所以选择了 Facebook 手动构建登录流程的方案。

是不是听着很耳熟?对!和 《实现 Google 第三方授权登录》 一样~

Facebook 手动构建登录流程Facebook 手动构建登录流程


配置 Facebook 应用

访问此处:https://developers.facebook.com/apps/?show_reminder=true

实现 Google 第三方授权登录

最近做项目要实现Google的第三方登录,这简单的记录一下。

目前Google的第三方登录有很多方案,且官方提供SDK方便接入。但是我这个项目同时要实现网页和客户端。所以选择了 Google OAuth 2.0 的方案。

当然,也可以 《实现 Facebook 第三方授权登录》

Google 的 OAuth 2.0 流程Google 的 OAuth 2.0 流程


配置 Google Cloud Platform

首先访问 Google Cloud Platform 控制台

地址:https://console.cloud.google.com/projectselector2/home

Waxy主题:自定义公告显示动态一言

本篇文章为Waxy主题设置中自定义CSS/JS的高级应用。

效果

最终效果演示最终效果演示

实现方法

置顶公告

<div class="hitokoto"><span class="typed" id="hitokoto"></span></div>

自定义CSS样式、

.top-text-body {
    /*设置公告栏高度,可以按需更改*/
    height: 25px;
}
.top-text-body::before{
    /*删除公告栏中公告两个字*/
    content: "";
}

自定义JS

Waxy主题:自定义网站背景

本篇文章为Waxy主题设置中自定义CSS/JS的高级应用。

如何自定义网站静态背景?

body {
    /*背景颜色*/
    background-color:#990505;
    /*背景图片url,可与上一项同时使用*/
    background-image: url(https://pic.idzd.top/usr/bg/5f6eeefb319ae1601105659386.jpg);
    /*背景图片重复方式,此处为不重复*/
    background-repeat: no-repeat;
    /*背景图片起始位置,此处为居中*/
    background-position: center;
    /*背景图片尺寸,此处为填充模式*/
    background-size: cover;
    /*背景图片是否滚动,此处为不滚动*/
    background-attachment: fixed;
}

Waxy主题:自定义Canvas背景

本篇文章为Waxy主题设置中自定义CSS/JS的高级应用。

什么是Canvas?

Canvas 是 HTML5 中一个新特性,开发者绘制一系列图形。通过和JavaScript配合,可以使静态的图形动起来~

当然更加具体的内容,还请您自己学习,这里不做展开~

后面飞扬的花瓣就是基于Canvas技术实现的后面飞扬的花瓣就是基于Canvas技术实现的

如何自定义Canvas背景?

目前Waxy主题支持3种方式自定义Canvas背景,在文章后面,我提供了几个整理好的背景。