手把手教你如何发布系统和GitHub的oAuth登录

最新推荐文章于 2023-03-01 16:51:57 发布
最新推荐文章于 2023-03-01 16:51:57 发布
阅读量302 收藏
点赞数
分类专栏： 发布系统 虚拟机 文章标签： 发布系统 虚拟机 oAuth github
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangweiscsdn/article/details/109709039
版权

实现线上Web服务

  • 下载安装VM Box, Ubuntu 镜像

    • Oracle VM VirtualBox 下载地址： https://www.virtualbox.org/
    • Ubuntu 20.04.1 LTS (Focal Fossa) 下载地址:https://releases.ubuntu.com/20.04/

  • 新建一个Node Server（Linux，Ubuntu-64bit）

  • 启动Node Server的时候引入Ubuntu 镜像

  • Ubuntu 镜像启动后需要更改镜像地址
    在这里插入图片描述

  • 填写用户名和服务器名，密码
    在这里插入图片描述

  • 勾选Install OpenSSH server
    在这里插入图片描述

  • 安装完毕，点击Reboot重启
    在这里插入图片描述

  • 手动重启
    在这里插入图片描述

  • 输入用户名和密码登录成功
    在这里插入图片描述

  • 用apt安装nodejs

sudo apt install nodejs

在这里插入图片描述

  • 用apt安装npm
sudo apt install npm

在这里插入图片描述

  • 用npm 全局安装 n

    用node 写的node版本管理

sudo npm install -g n

在这里插入图片描述

  • 用 n 来管理node版本
    要最新的node， 这里安装最新版会有问题，所以还是安装14.11.0
sudo n 14.11.0

在这里插入图片描述

  • PATH=$“PATH”

  • 在本地创建server文件夹，然后用express快速搭建一个服务器


mkdir server
cd server
npx express-generator // 要是经常初始化项目，可以全局安装 npm install -g express-generator
npm install
npm start //默认3000端口
  • 在虚拟机上启动ssh
service ssh start

默认22端口

在这里插入图片描述

  • 虚拟机设置22端口(PS:只有虚拟机用户才需要配置端口，正常的机器不需要)

在这里插入图片描述
在这里插入图片描述

  • 用scp命令

把本地目录的所有文件从8022 端口copy到虚拟机上
P后面跟端口号
127.0.0.1 如果是真的服务器，就用服务器的ip地址就可以了

因为copy整个目录，所以加个-r

scp -P 8022 -r ./* eve@127.0.0.1:/home/eve/server

在这里插入图片描述

虚拟机上创建完目录再在本地试一次，这次成功了，可以看到虚拟机上的文件，这个时候不需要在虚拟机上npm install ，只要虚拟机上的node modules 和本地的保持一致即可
在这里插入图片描述

  • 在虚拟机上执行npm start
    这个时候监听的是3000端口，所以还是要添加新的端口映射
    在这里插入图片描述

  • 添加新的端口映射(PS:只有虚拟机用户才需要配置端口，正常的机器不需要)

在这里插入图片描述

这个时候可以在浏览器看到
在这里插入图片描述

然后虚拟机上的效果
在这里插入图片描述

  • 访问一下style.css也可以看到
    在这里插入图片描述

实现一个发布系统

在本地新建两个文件夹publish-tool和publish-server,然后全都先npm init一下,然后再各新建publish.js和erver.js文件

mkdir publish-tool
cd publish-tool
npm init
touch publish.js

mkdir publish-server
cd publish-tool
npm init
touch server.js
  • publish.js的代码

let http = require('http');

let fs = require("fs");

    let request = http.request({
        hostname:"127.0.0.1",
        port:8082,
        method: "POST",
        headers:{
            'Content-Type':'application/octet-stream', // 流式传输的类型
        }
    }, response => {
        console.log(response);
        
    })
    
    let file = fs.createReadStream("./package.json");


file.on('data', chunk => {
    console.log(chunk.toString());
    request.write(chunk);
})
file.on('end', chunk => {
    console.log("read finished");
    request.end(chunk);
})
  • server.js 的代码
let http = require('http');
let fs = require('fs');

http.createServer((req, res) => {
    console.log(req.headers);

    req.on('data', chunk => {
        console.log(chunk);

    })
    req.on('end', chunk => {
        res.end('success');
    })
}).listen(8082);

  • 用vscode分别打开着两个文件，然后点击左边的debug按钮

    • 先监听server.js,下图是运行完publish才会收到结果
      在这里插入图片描述

    • 再运行publish.js
      在这里插入图片描述

  • 修改一下两个文件的代码

// publish.js
let http = require('http');

let fs = require("fs");

    let request = http.request({
        hostname:"127.0.0.1",
        port:8082,
        method: "POST",
        headers:{
            'Content-Type':'application/octet-stream', // 流式传输的类型
          
        }
    }, response => {
        console.log(response);
        
    })
    
    let file = fs.createReadStream("./sample/sample.html"); // 记得新建sample.html
 


file.on('data', chunk => {
    console.log(chunk.toString());
    request.write(chunk);
})
file.on('end', chunk => {
    console.log("read finished");
    request.end(chunk);
})


// server.js
let http = require('http');
let fs = require('fs');

http.createServer((req, res) => {
    console.log(req.headers);

    let outFile = fs.createWriteStream("../server/public/index.html") // 我的server文件夹和publish-tool、publish-server是在同一个路径下

    req.on('data', chunk => {
        console.log(chunk);
        outFile.write(chunk);

    })
    req.on('end', chunk => {
        outFile.end();
        res.end('success');
    })
}).listen(8082);

<!-- sample.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
</head>
<body>
    <h1>Hello333</h1>
</body>
</html>
  • 然后继续监听publish-server,运行publish-tool,只要没有报错即可，然后你再进入到之前的server文件夹里，启动server，然后在浏览器打开3000端口，这个时候可以看到原来的index.html被sample.html覆盖了

cd server
npm start //默认3000端口

在这里插入图片描述

  • 发布系统

因为总是要发布，所以命令可以统一写在package.json里的script
在这里插入图片描述

其他文件也是这样写，只是后面的文件名不一致

  • 服务器上启动多个服务
npm start&

在这里插入图片描述

在这里插入图片描述

  • publish-server 用的端口8022，所以还是要设置端口转发(PS:只有虚拟机用户才需要配置端口，正常的机器不需要)

在这里插入图片描述

这个时候代码里改一下publish.js的端口
在这里插入图片描述

  • 然后本地运行publish.js
    在这里插入图片描述

  • 在浏览器打开8080端口可以看到Hello333,这个时候就是模拟了本地访问线上的服务器
    在这里插入图片描述

单文件发布

// publish.js

let http = require('http');

let fs = require("fs");


fs.stat('./sample/sample.html', (err, stats) => { // 单文件场景

    let request = http.request({
        hostname:"127.0.0.1",
        port:8082,
        // port:8882,
        method: "POST",
        headers:{
            'Content-Type':'application/octet-stream', // 流式传输的类型
            'Conten-Length':stats.size,
        }
    }, response => {
        console.log(response);
        
    })
    
    let file = fs.createReadStream("./sample/sample.html");

    
    file.pipe(request);
    
    file.on('end', () => request.end());
})

// server.js
let http = require('http');
let fs = require('fs');

http.createServer((req, res) => {
    console.log('req');
    let outFile = fs.createWriteStream("../server/public/index.html")
    req.pipe(outFile);
}).listen(8082);

可以修改一下sample.html,然后再启动监听server服务，运行publish.js之后，在浏览器看3000端口内容是否跟sample.html内容一致

多文件发布

新增一张图片和sample.html放在一起

  • 在publish-tool安装archiver压缩
npm install --save archiver

在这里插入图片描述

  • publish.js的代码修改

let http = require('http');

let fs = require("fs");

let archiver = require("archiver");

    let request = http.request({
        hostname:"127.0.0.1",
        port:8082,
        // port:8882,
        method: "POST",
        headers:{
            'Content-Type':'application/octet-stream', // 流式传输的类型
            // 'Conten-Length':stats.size,
        }
    }, response => {
        console.log(response);
        
    })
    

     // 创建archiver实例
    const  archive = archiver('zip', {
        zlib:{level:9}
    })

    archive.directory('./sample/', false);

    archive.finalize(); // 填好压缩内容
    archive.pipe(fs.createWriteStream("tmp.zip")
     archive.pipe(request);

然后直接运行publish.js,可以看到当前文件下的tmp.zip压缩文件
在这里插入图片描述

  • server.js文件修改
let http = require('http');
let fs = require('fs');

http.createServer((req, res) => {
    console.log('req');

    let outFile = fs.createWriteStream("../server/public/tmp.zip")
    req.pipe(outFile);
}).listen(8082);

然后重新运行一次publish.js文件，就可以在server/public/路径下看到tmp.zip压缩文件了
在这里插入图片描述

  • 在服务端进行解压
    sudo npm install --save unzipper
sudo npm install --save unzipper

在这里插入图片描述

  • server.js解压代码修改
let http = require('http');
let unzipper = require('unzipper');

http.createServer((req, res) => {
    console.log('req');

    req.pipe(unzipper.Extract({path:'../server/public/'}));
}).listen(8082);

然后再重新启动publish.js这样就可以在server文件夹里看到解压后的文件了

在这里插入图片描述

Github oAuth 登录实例

  • 先从GitHub主页的settings进去，然后在左边列表找到Developer settings进去

在这里插入图片描述

  • 然后选择New Github App

在这里插入图片描述

  • New Github App填写内容

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • 提交后获取私钥
    在这里插入图片描述

  • 参考oAuth的文档
    https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/

  • oAth的总体思路

    • publish-tool打开https://github.com/login/oauth/authorize?client_id=xxx
    • publish-server的auth路由：接收code,用code+client_id +client-secret换取token
    • 创建server，接收token，点击发布
    • 用token获取用户信息，检查权限
    • publish路由：接收发布

  • 修改publish.js代码


let http = require('http');

let fs = require("fs");

let archiver = require("archiver");

let child_process = require("child_process");

// 打开https://github.com/login/oauth/authorize

child_process.exec(`open https://github.com/login/oauth/authorize?client_id=Iv1.73af973ded44837a`)

// 创建server，接收token，点击发布



     // 创建archiver实例
    const  archive = archiver('zip', {
        zlib:{level:9}
    })

    archive.directory('./sample/', false);

    archive.finalize(); // 填好压缩内容
    archive.pipe(fs.createWriteStream("tmp.zip"))
    
    archive.pipe(request);

然后运行publish.js,浏览器会自动打开授权页面

在这里插入图片描述

  • 完整版publish.js代码

let http = require('http');

let fs = require("fs");

let archiver = require("archiver");
let querystring = require('querystring');

let child_process = require("child_process");

// 打开https://github.com/login/oauth/authorize

child_process.exec(`open https://github.com/login/oauth/authorize?client_id=xxx`)

// 创建server，接收token，点击发布


http.createServer((req, res) => {
    let query = querystring.parse(req.url.match(/^\/\?([\s\S]+)$/)[1]);
    // console.log({query});
    publish(query.token)
}).listen(8083);

function publish(token){
 let request = http.request({
        hostname:"127.0.0.1",
        port:8082,
        // port:8882,
        method: "POST",
        path:`/publish?token=${token}`,
        headers:{
            'Content-Type':'application/octet-stream', // 流式传输的类型
            // 'Conten-Length':stats.size,
        }
    }, response => {
        console.log(response);
        
    })
    let file = fs.createReadStream("./sample/sample.html");
// 创建archiver实例
    const  archive = archiver('zip', {
        zlib:{level:9}
    })

    archive.directory('./sample/', false);

    archive.finalize(); // 填好压缩内容
    archive.pipe(fs.createWriteStream("tmp.zip"))
    
    archive.pipe(request);
}
  • 完整版server.js代码
let http = require('http');
let https = require('https');
// let fs = require('fs');
let unzipper = require('unzipper');
let querystring = require('querystring');


function auth(req, res) {
let query = querystring.parse(req.url.match(/^\/auth\?([\s\S]+)$/)[1]);
// console.log({query});
getToken(query.code, function (info) {
    // res.write(JSON.stringify(info));
    res.write(`<a href='http://localhost:8083/?token=${info.access_token}'>publish</a>`);
    res.end();
    // console.log(info);
})
}
function getToken(code, callback) {

    let request = https.request({
        hostname:"github.com",
        path:`/login/oauth/access_token?code=${code}&client_id=Ixxx&client_secret=xxx`,
        port:443,
        method:"POST",
    }, function(response){
        console.log(response);
        let body = ""
        response.on('data', chunk => {
            console.log(chunk.toString());
            body += chunk.toString()
        })
        response.on('end', chunk => {
            // let o = querystring.parse(body)
            // console.log(o);
            callback(querystring.parse(body))
        })
    })
    request.end();
}
function publish(req, res) {
let query = querystring.parse(req.url.match(/^\/publish\?([\s\S]+)$/)[1]);
getUser(query.token, info => {
    if (info.login === 'EveWeiGit') {
    req.pipe(unzipper.Extract({path:'../server/public/'}));
    req.on('end', function() {
        res.end('success');
    })
    }
})
    
}

function getUser(token, callback) {
    let request = https.request({
        hostname:"api.github.com",
        path:`/user`,
        port:443,
        method:"GET",
        headers:{
            "Authorization": `token ${token}`,
            "User-Agent":"wei-publish",
        }
    }, function(response){
        // console.log(response);
        let body = ""
        response.on('data', chunk => {
            console.log(chunk.toString());
            body += chunk.toString()
        })
        response.on('end', chunk => {
            let o = JSON.parse(body)
            console.log('o', o, o.login);
            callback(o)
        })
    })
    request.end();
}

http.createServer((req, res) => {
    // console.log('req');

    if(req.url.match(/^\/auth\?/)) {
        return auth(req, res)
    }
    if(req.url.match(/^\/publish\?/)) {
        return publish(req, res)
    }

}).listen(8082);
  • 先启动监听server.js
  • 然后运行publish.js,

在这里插入图片描述

  • 点击publish
    就可以发布了，先把之前的server/public/ 下的文件删除，这样操作后就可以看到发布过去的图片和sample.html了

公众号

欢迎大家关注我的公众号： 石马上coding，一起成长
石马上coding

Eveweiscsdn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
verdaccio-github-oauth-ui：Ver用于Verdaccio的GitHub OAuth插件
02-03
这是一个Verdaccio插件，为浏览器和命令行提供GitHub OAuth集成。 产品特点 UI集成，具有完整的登录和注销功能。 单击登录按钮后，用户将重定向到GitHub并返回工作会话。 更新了使用情况信息和适用于安装命令的...
GitHub入门教程 手把手教你最简单的开源项目托管
10-20
主要介绍了GitHub入门教程 手把手教你最简单的开源项目托管,需要的朋友可以参考下
如何发布系统
我的目标是CEO，最近小目标是项目架构师！
01-03 486
ASP.NET --mvc4.0---vs2015发布系统、部署常见问题！ 1、在项目的web层上右击-->重新生成，右击发布！ 如图： 接下来就是发布了，按照图片一步一步来就行！ 以上就是vs2015的发布，下面就是该部署到iis上面了！ 依然图片说事儿！ 1、首先打开iis，打开步骤（控制面板--->管理工具-->Internet Information Servi
发布系统的步骤
a79468981的博客
10-21 210
1、用VS将系统发布到文件夹中 2、在IIS管理器中为文件夹添加网站 3、将对应的系统文件夹右键选择转换为应用程序 4、发布的网站目录不能有中文 转载于:https://www.cnblogs.com/xlyg-14/p/4897953.html...
GithubOAuth授权登录的步骤
qq_36891203的博客
09-27 479
GitHub OAuth 官方Doc 1. 在github上注册APP 2. 请求githubAPI，跳转至用户授权页面 3.用户授权后，github会携带code，请求callbackurl 4.服务器接收请求后获得code，再携带code,client_id,client_secret,redirect_uri,state等数据POST请求API。 5.从github的响应得到token 6.最后携带token请求API，获得用户信息 晚上有点晚了，等之后有时间补上在springboot实现的详细过程
GitHubDesktop权限问题解决办法
w36680130的博客
05-20 933
GitHubDesktop权限问题解决办法
在线投稿、审稿系统
weixin_30301183的博客
06-04 544
http://www.chinaphar.com/pdf/Reviewer_Guidechinese.pdf审稿人版http://www.asiaandro.com/AuthorGuide_cn%20.pdf 作者版 转载于:https://www.cnblogs.com/cy163/archive/2006/06/04/416906.html
django-github-oauth:Github OAuth 的身份验证后端
07-06
Django Github OAuth 使用 Github 的 OAuth 对 Django Web 应用程序中的用户进行身份验证的后端。安装通过设置工具 python setup.py install通过 PyPi pip install django-github-oauth用法在您的project/settings....
spring-boot集成spring-security的oauth2实现github登录网站的示例
08-28
2. 加上 `@EnableOAuth2Sso` 注解后，原来系统里配置的 `/login` 就默认成了 OAuth2 登录的路由了，这里通过配置 `security.oauth2.sso.login-path` 更改了保存登录用户。 注解 `@EnableOAuth2Sso` 登录成功了，会...
ueberauth_github:Überauth的GitHub OAuth2策略
05-15
添加:ueberauth_github你在依赖列表mix.exs ： def deps do [{ :ueberauth_github , " ~> 0.7 " }]end 将GitHub添加到您的Überauth配置中： config :ueberauth , Ueberauth , providers: [ github: { Ueberauth ....
信息发布系统源码(C C# ASP .NET 毕业设计)
12-30
信息发布系统源码(C C# ASP .NET 毕业设计) 可直接运行。做毕业设计、课程设计或者想研究下技术的可以下载学习。需要更多资源的可以关注我。
MiniCMS_GitHub - twamix/MiniCMS: 至简的个人网站内容管理系统
weixin_29107289的博客
12-31 405
网络上找了不少CMS用起来都很麻烦，无意中看到MiniCMS，比较喜欢其简介设计。但是功能比较欠缺。遂改造之。目前相对原版增加子目录安装，以及admin与mc-files任意命名，只需要修改更目录下conf-inc.php中__COMMON_DIR__与__ADMIN_DIR__两个定义。TODO1.增加markdown编辑器 https://code.google.com/p/pagedown/...
GitLab 配置 OAuth2 实现第三方登录，简直太方便了！
热门推荐
Java知音
02-10 1万+
点击关注公众号，实用技术文章及时了解需求提出：公司内部已有一套oneid用户中心，需要支持登录gitlab。实现GitLab支持配置第三方登录， 修改配置文件gitlab.rb：vi/e...
记录在使用git进行上传本地文件到github上遇到的一些问题以及解决办法
qq_44858403的博客
12-12 2983
记录在使用git进行上传本地文件到github上遇到的一些问题以及解决办法
OAuth2 -GitHub授权登录超详细教程
weixin_54051907的博客
03-01 1595
一二三四举例保存好secretsclient_id：GitHub网站接入提供的 APP KEYredirect_uri：认证后重定向的地址GitHub授权页面会有一个跳转等待页网络不稳定可能一直卡在这个页面F12查看网络，可以看见网站向后端发了一个code码，这个code用来换取token核心代码（有一些我自己项目里的代码，注意修改）总结流程
gitlab使用oauth2授权认证实操
LiXueFu727224204的博客
03-17 2817
背景 本地想一键发版，但是拉取代码时，由于需要输入账号密码，所以想着有没有可以替代的方法，可以免除输入账号密码这个过程，也就是有个授权的key能越过这个步骤 关于OAuth2 见官方文档：https://docs.gitlab.com/ee/integration/oauth_provider.html 总之就是能生成一个授权的key，然后把这个key放到拉取代码的URL上，然后就可以解决授权认证的问题 具体操作 1、点击setting中的acess tokens； 2、如图操作，任意输入名字，勾选rea
GitLab oauth2.0 第三方登录 单点登录
weixin_42286276的博客
06-16 5339
GitLab oauth2.0 第三方登录 单点登录不废话，直接上代码 不废话，直接上代码 ## Oauth2.0配置 gitlab_rails['omniauth_enabled'] = true ## 与显示的name保持一致 gitlab_rails['omniauth_allow_single_sign_on'] = ['ssdlc'] ## true时，创建的用户会被封锁 gitlab_rails['omniauth_block_auto_created_users'] = false gitl
如何利用GitHub发布个人网站
weixin_51761397的博客
10-04 2892
通过github将个人制作的静态网站发布公开
如何在github发布个人网站或开源项目-手把手教您制作并发布个人网站或主页（二）...
haierboos
08-14 607
（首先感谢留美博士czxttkl的技术支持maider.blog.sohu.com） 作为开源代码库以及版本控制系统，Github目前拥有140多万开发者用户。随着越来越多的应用程序转移到了云上，Github已经成为了管理软件开发以及发现已有代码的首选方法。 下面将分布讲解如何在github上发布个人网站。 1.首先登陆github，网址htt...
手把手教你用github
最新发布
10-19
下面是手把手教你使用GitHub的步骤： 1. 首先，你需要在GitHub官网上注册一个账号。 2. 在GitHub上创建一个新的仓库，点击页面右上角的“+”按钮，选择“New repository”，填写仓库名称和描述，选择公开或私有，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值