Replace Github -> GitHub (Portuguese) (#35166)
This commit is contained in:
Lipis
Randell Dawson
@@ -7,7 +7,7 @@ localeTitle: Estratégias de Autenticação
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Como lembrete, este projeto está sendo construído sobre o seguinte projeto inicial no <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-advancednode/">Glitch</a> , ou clonado a partir do <a href="https://github.com/freeCodeCamp/boilerplate-advancednode/">GitHub</a> . Uma estratégia é uma maneira de autenticar um usuário. Você pode usar uma estratégia para permitir que os usuários se autentiquem com base em informações salvas localmente (se você fizer com que elas se registrem primeiro) ou em vários provedores, como o Google ou o Github. Para este projeto, vamos criar uma estratégia local. Para ver uma lista das centenas de estratégias, visite o site Passports <a href="http://passportjs.org/">aqui</a> . Adicione o <em>passport-local</em> como uma dependência e adicione-o ao seu servidor da seguinte forma: <code>const LocalStrategy = require('passport-local');</code> Agora você terá que dizer ao passport para <b>usar</b> um objeto LocalStartegy instanciado com algumas configurações definidas. Certifique-se de que isso e tudo a partir deste ponto é encapsulado na conexão com o banco de dados, pois depende dele! <pre> passport.use (novo LocalStrategy (
|
||||
<section id="description"> Como lembrete, este projeto está sendo construído sobre o seguinte projeto inicial no <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-advancednode/">Glitch</a> , ou clonado a partir do <a href="https://github.com/freeCodeCamp/boilerplate-advancednode/">GitHub</a> . Uma estratégia é uma maneira de autenticar um usuário. Você pode usar uma estratégia para permitir que os usuários se autentiquem com base em informações salvas localmente (se você fizer com que elas se registrem primeiro) ou em vários provedores, como o Google ou o GitHub. Para este projeto, vamos criar uma estratégia local. Para ver uma lista das centenas de estratégias, visite o site Passports <a href="http://passportjs.org/">aqui</a> . Adicione o <em>passport-local</em> como uma dependência e adicione-o ao seu servidor da seguinte forma: <code>const LocalStrategy = require('passport-local');</code> Agora você terá que dizer ao passport para <b>usar</b> um objeto LocalStartegy instanciado com algumas configurações definidas. Certifique-se de que isso e tudo a partir deste ponto é encapsulado na conexão com o banco de dados, pois depende dele! <pre> passport.use (novo LocalStrategy (
|
||||
função (nome de usuário, senha, feito) {
|
||||
db.collection ('users'). findOne ({username: username}, função (err, user) {
|
||||
console.log ('Usuário' + nome de usuário + 'tentou efetuar login.');
|
||||
@@ -17,7 +17,7 @@ localeTitle: Estratégias de Autenticação
|
||||
retorno feito (null, usuário);
|
||||
});
|
||||
}
|
||||
)); </pre> Isso está definindo o processo a ser tomado quando tentamos autenticar alguém localmente. Primeiro, ele tenta encontrar um usuário em nosso banco de dados com o nome de usuário inserido, depois verifica se a senha corresponde e, finalmente, se não houver erros que verifiquemos, como uma senha incorreta, o objeto users será retornado e eles serão exibidos. autenticado. Muitas estratégias são configuradas usando diferentes configurações, em geral é fácil configurá-lo com base no README desse repositório de estratégias. Um bom exemplo disso é a estratégia do Github, onde não precisamos nos preocupar com um nome de usuário ou senha, porque o usuário será enviado para a página de autenticação do Github para autenticar e, desde que esteja logado e concordar, o Github retorna seu perfil para nos usar. Na próxima etapa, vamos configurar como chamar a estratégia de autenticação para validar um usuário com base nos dados do formulário! Envie sua página quando achar que está correta até o momento. </section>
|
||||
)); </pre> Isso está definindo o processo a ser tomado quando tentamos autenticar alguém localmente. Primeiro, ele tenta encontrar um usuário em nosso banco de dados com o nome de usuário inserido, depois verifica se a senha corresponde e, finalmente, se não houver erros que verifiquemos, como uma senha incorreta, o objeto users será retornado e eles serão exibidos. autenticado. Muitas estratégias são configuradas usando diferentes configurações, em geral é fácil configurá-lo com base no README desse repositório de estratégias. Um bom exemplo disso é a estratégia do GitHub, onde não precisamos nos preocupar com um nome de usuário ou senha, porque o usuário será enviado para a página de autenticação do GitHub para autenticar e, desde que esteja logado e concordar, o GitHub retorna seu perfil para nos usar. Na próxima etapa, vamos configurar como chamar a estratégia de autenticação para validar um usuário com base nos dados do formulário! Envie sua página quando achar que está correta até o momento. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@@ -7,7 +7,7 @@ localeTitle: Implementação da Autenticação Social II
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Como lembrete, este projeto está sendo construído sobre o seguinte projeto inicial no <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-socialauth/">Glitch</a> , ou clonado a partir do <a href="https://github.com/freeCodeCamp/boilerplate-socialauth/">GitHub</a> . A última parte da configuração da autenticação do Github é criar a estratégia em si. Para isso, você precisará adicionar a dependência de 'passport-github' ao seu projeto e requerê-lo como GithubStrategy como <code>const GitHubStrategy = require('passport-github').Strategy;</code> . Para configurar a estratégia do Github, você precisa dizer ao <b>passport</b> para <b>usar</b> um <b>GithubStrategy</b> instanciado, que aceita 2 argumentos: Um objeto (contendo <em>clientID</em> , <em>clientSecret</em> e <em>callbackURL</em> ) e uma função a ser chamada quando um usuário é autenticado com sucesso, o que determinaremos se o usuário for novo e quais campos salvar inicialmente no objeto de banco de dados do usuário. Isso é comum em muitas estratégias, mas algumas podem exigir mais informações, conforme descrito no README do github dessa estratégia específica. Por exemplo, o Google também exige um <em>escopo</em> que determine o tipo de informação que sua solicitação está pedindo e peça ao usuário que aprove esse acesso. A atual estratégia que estamos implementando tem seu uso descrito <a>aqui</a> , mas estamos passando por tudo isso aqui no freeCodeCamp! Veja como sua nova estratégia deve olhar neste ponto: <pre> passport.use (new GitHubStrategy ({
|
||||
<section id="description"> Como lembrete, este projeto está sendo construído sobre o seguinte projeto inicial no <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-socialauth/">Glitch</a> , ou clonado a partir do <a href="https://github.com/freeCodeCamp/boilerplate-socialauth/">GitHub</a> . A última parte da configuração da autenticação do GitHub é criar a estratégia em si. Para isso, você precisará adicionar a dependência de 'passport-github' ao seu projeto e requerê-lo como GithubStrategy como <code>const GitHubStrategy = require('passport-github').Strategy;</code> . Para configurar a estratégia do GitHub, você precisa dizer ao <b>passport</b> para <b>usar</b> um <b>GithubStrategy</b> instanciado, que aceita 2 argumentos: Um objeto (contendo <em>clientID</em> , <em>clientSecret</em> e <em>callbackURL</em> ) e uma função a ser chamada quando um usuário é autenticado com sucesso, o que determinaremos se o usuário for novo e quais campos salvar inicialmente no objeto de banco de dados do usuário. Isso é comum em muitas estratégias, mas algumas podem exigir mais informações, conforme descrito no README do github dessa estratégia específica. Por exemplo, o Google também exige um <em>escopo</em> que determine o tipo de informação que sua solicitação está pedindo e peça ao usuário que aprove esse acesso. A atual estratégia que estamos implementando tem seu uso descrito <a>aqui</a> , mas estamos passando por tudo isso aqui no freeCodeCamp! Veja como sua nova estratégia deve olhar neste ponto: <pre> passport.use (new GitHubStrategy ({
|
||||
clientID: process.env.GITHUB_CLIENT_ID,
|
||||
clientSecret: process.env.GITHUB_CLIENT_SECRET,
|
||||
callbackURL: / * INSERIR URL DE CHAMADA INSERIDO NO GITHUB AQUI * /
|
||||
@@ -16,7 +16,7 @@ localeTitle: Implementação da Autenticação Social II
|
||||
console.log (perfil);
|
||||
// Lógica do banco de dados aqui com retorno de chamada contendo nosso objeto de usuário
|
||||
}
|
||||
)); </pre> Sua autenticação ainda não será bem-sucedida e, na verdade, lançará um erro, sem a lógica do banco de dados e o retorno de chamada, mas você deverá registrar no seu console seu perfil do Github, se tentar! Envie sua página quando achar que está certo. </section>
|
||||
)); </pre> Sua autenticação ainda não será bem-sucedida e, na verdade, lançará um erro, sem a lógica do banco de dados e o retorno de chamada, mas você deverá registrar no seu console seu perfil do GitHub, se tentar! Envie sua página quando achar que está certo. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
@@ -31,7 +31,7 @@ tests:
|
||||
testString: 'getUserInput => $.get(getUserInput("url")+ "/_api/package.json") .then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, "passport-github", "Your project should list "passport-github" as a dependency"); }, xhr => { throw new Error(xhr.statusText); })'
|
||||
- text: Dependência requerida
|
||||
testString: 'getUserInput => $.get(getUserInput("url")+ "/_api/server.js") .then(data => { assert.match(data, /require.*("|")passport-github("|")/gi, "You should have required passport-github"); }, xhr => { throw new Error(xhr.statusText); })'
|
||||
- text: Configuração da estratégia do Github corretamente até agora
|
||||
- text: Configuração da estratégia do GitHub corretamente até agora
|
||||
testString: 'getUserInput => $.get(getUserInput("url")+ "/_api/server.js") .then(data => { assert.match(data, /passport.use.*new GitHubStrategy/gi, "Passport should use a new GitHubStrategy"); assert.match(data, /callbackURL:( |)("|").*("|")/gi, "You should have a callbackURL"); assert.match(data, /process.env.GITHUB_CLIENT_SECRET/g, "You should use process.env.GITHUB_CLIENT_SECRET"); assert.match(data, /process.env.GITHUB_CLIENT_ID/g, "You should use process.env.GITHUB_CLIENT_ID"); }, xhr => { throw new Error(xhr.statusText); })'
|
||||
|
||||
```
|
||||
|
||||
@@ -7,7 +7,7 @@ localeTitle: Implementação da Autenticação Social III
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Como lembrete, este projeto está sendo construído sobre o seguinte projeto inicial no <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-socialauth/">Glitch</a> , ou clonado a partir do <a href="https://github.com/freeCodeCamp/boilerplate-socialauth/">GitHub</a> . A parte final da estratégia é manipular o perfil retornado do Github. Precisamos carregar o objeto de banco de dados de usuários, se existir, ou criar um, se não existir, e preencher os campos do perfil e, em seguida, retornar o objeto do usuário. O Github nos fornece um <em>ID</em> exclusivo dentro de cada perfil, que podemos usar para pesquisar com o serializador do usuário (já implementado). Abaixo está um exemplo de implementação que você pode usar em seu projeto - ele vai dentro da função que é o segundo argumento para a nova estratégia, logo abaixo do <code>console.log(profile);</code> atualmente é: <pre> db.collection ('socialusers'). findAndModify (
|
||||
<section id="description"> Como lembrete, este projeto está sendo construído sobre o seguinte projeto inicial no <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-socialauth/">Glitch</a> , ou clonado a partir do <a href="https://github.com/freeCodeCamp/boilerplate-socialauth/">GitHub</a> . A parte final da estratégia é manipular o perfil retornado do GitHub. Precisamos carregar o objeto de banco de dados de usuários, se existir, ou criar um, se não existir, e preencher os campos do perfil e, em seguida, retornar o objeto do usuário. O GitHub nos fornece um <em>ID</em> exclusivo dentro de cada perfil, que podemos usar para pesquisar com o serializador do usuário (já implementado). Abaixo está um exemplo de implementação que você pode usar em seu projeto - ele vai dentro da função que é o segundo argumento para a nova estratégia, logo abaixo do <code>console.log(profile);</code> atualmente é: <pre> db.collection ('socialusers'). findAndModify (
|
||||
{id: profile.id},
|
||||
{}
|
||||
{$ setOnInsert: {
|
||||
@@ -37,7 +37,7 @@ localeTitle: Implementação da Autenticação Social III
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Configuração da estratégia do Github completa
|
||||
- text: Configuração da estratégia do GitHub completa
|
||||
testString: 'getUserInput => $.get(getUserInput("url")+ "/_api/server.js") .then(data => { assert.match(data, /GitHubStrategy[^]*db.collection/gi, "Strategy should use now use the database to search for the user"); assert.match(data, /GitHubStrategy[^]*socialusers/gi, "Strategy should use "socialusers" as db collection"); assert.match(data, /GitHubStrategy[^]*return cb/gi, "Strategy should return the callback function "cb""); }, xhr => { throw new Error(xhr.statusText); })'
|
||||
|
||||
```
|
||||
|
||||
@@ -7,7 +7,7 @@ localeTitle: Implementação de Autenticação Social
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Como lembrete, este projeto está sendo construído sobre o seguinte projeto inicial no <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-socialauth/">Glitch</a> , ou clonado a partir do <a href="https://github.com/freeCodeCamp/boilerplate-socialauth/">GitHub</a> . O caminho básico que esse tipo de autenticação seguirá no seu aplicativo é: <ol><li> Usuário clica em um botão ou link enviando-os para o nosso percurso para autenticar usando uma estratégia específica (EG. Github) </li><li> Sua rota chama <code>passport.authenticate('github')</code> que os redireciona para o Github. </li><li> A página em que o usuário acessa, no Github, permite que eles efetuem login, caso ainda não estejam. Em seguida, ele pede que eles aprove o acesso ao perfil deles em nosso aplicativo. </li><li> Em seguida, o usuário é retornado ao nosso aplicativo em um URL de retorno de chamada específico com o perfil dele, se ele for aprovado. </li><li> Eles agora estão autenticados e seu aplicativo deve verificar se é um perfil de retorno ou salvá-lo em seu banco de dados, se não estiver. </li></ol> Estratégias com o OAuth exigem que você tenha pelo menos um <em>ID do cliente</em> e um <em>Segredo do cliente,</em> que é uma forma de verificar de quem é a solicitação de autenticação e se ela é válida. Estes são obtidos a partir do site com o qual você está tentando implementar a autenticação, como o Github, e são exclusivos do seu aplicativo - <b>NÃO PODEM SER COMPARTILHADOS</b> e nunca devem ser carregados em um repositório público ou gravados diretamente em seu código. Uma prática comum é colocá-los em seu arquivo <em>.env</em> e referenciá-los como: <code>process.env.GITHUB_CLIENT_ID</code> . Para este desafio, vamos usar a estratégia do Github. A obtenção da <em>ID do cliente e do Segredo <em>no Github é feita nas configurações do perfil da conta em "configurações do desenvolvedor" e " <a href="https://github.com/settings/developers">Aplicativos OAuth</a> ". Clique em "Registrar um novo aplicativo", nomeie seu aplicativo, cole o URL na página inicial ( <b>não o URL do código do projeto</b> ) e, por último, no URL de retorno, cole no mesmo URL da página inicial, mas com "/ auth / github / callback 'adicionado em. É para onde os usuários serão redirecionados para que possamos lidar após a autenticação no Github. Salve as informações retornadas como 'GITHUB_CLIENT_ID' e 'GITHUB_CLIENT_SECRET' em seu arquivo .env. Em seu projeto remixado, crie duas rotas aceitando solicitações GET: / auth / github e / auth / github / callback. O primeiro deve apenas chamar o passaporte para autenticar o 'github' e o segundo deve chamar o passaporte para autenticar o 'github' com um redirecionamento de falha para '/' e, se for bem-sucedido, redirecionar para '/ profile' (semelhante ao nosso último projeto). Um exemplo de como '/ auth / github / callback' deve ser semelhante é como lidamos com um login normal em nosso último projeto:</em></em> <pre> <em><em>app.route ('/ login')
|
||||
<section id="description"> Como lembrete, este projeto está sendo construído sobre o seguinte projeto inicial no <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-socialauth/">Glitch</a> , ou clonado a partir do <a href="https://github.com/freeCodeCamp/boilerplate-socialauth/">GitHub</a> . O caminho básico que esse tipo de autenticação seguirá no seu aplicativo é: <ol><li> Usuário clica em um botão ou link enviando-os para o nosso percurso para autenticar usando uma estratégia específica (EG. GitHub) </li><li> Sua rota chama <code>passport.authenticate('github')</code> que os redireciona para o GitHub. </li><li> A página em que o usuário acessa, no GitHub, permite que eles efetuem login, caso ainda não estejam. Em seguida, ele pede que eles aprove o acesso ao perfil deles em nosso aplicativo. </li><li> Em seguida, o usuário é retornado ao nosso aplicativo em um URL de retorno de chamada específico com o perfil dele, se ele for aprovado. </li><li> Eles agora estão autenticados e seu aplicativo deve verificar se é um perfil de retorno ou salvá-lo em seu banco de dados, se não estiver. </li></ol> Estratégias com o OAuth exigem que você tenha pelo menos um <em>ID do cliente</em> e um <em>Segredo do cliente,</em> que é uma forma de verificar de quem é a solicitação de autenticação e se ela é válida. Estes são obtidos a partir do site com o qual você está tentando implementar a autenticação, como o GitHub, e são exclusivos do seu aplicativo - <b>NÃO PODEM SER COMPARTILHADOS</b> e nunca devem ser carregados em um repositório público ou gravados diretamente em seu código. Uma prática comum é colocá-los em seu arquivo <em>.env</em> e referenciá-los como: <code>process.env.GITHUB_CLIENT_ID</code> . Para este desafio, vamos usar a estratégia do GitHub. A obtenção da <em>ID do cliente e do Segredo <em>no GitHub é feita nas configurações do perfil da conta em "configurações do desenvolvedor" e " <a href="https://github.com/settings/developers">Aplicativos OAuth</a> ". Clique em "Registrar um novo aplicativo", nomeie seu aplicativo, cole o URL na página inicial ( <b>não o URL do código do projeto</b> ) e, por último, no URL de retorno, cole no mesmo URL da página inicial, mas com "/ auth / github / callback 'adicionado em. É para onde os usuários serão redirecionados para que possamos lidar após a autenticação no GitHub. Salve as informações retornadas como 'GITHUB_CLIENT_ID' e 'GITHUB_CLIENT_SECRET' em seu arquivo .env. Em seu projeto remixado, crie duas rotas aceitando solicitações GET: / auth / github e / auth / github / callback. O primeiro deve apenas chamar o passaporte para autenticar o 'github' e o segundo deve chamar o passaporte para autenticar o 'github' com um redirecionamento de falha para '/' e, se for bem-sucedido, redirecionar para '/ profile' (semelhante ao nosso último projeto). Um exemplo de como '/ auth / github / callback' deve ser semelhante é como lidamos com um login normal em nosso último projeto:</em></em> <pre> <em><em>app.route ('/ login')
|
||||
.post (passport.authenticate ('local', {failureRedirect: '/'}), (req, res) => {
|
||||
res.redirect ('/ profile');
|
||||
});</em></em> </pre> <em><em>Envie sua página quando achar que está certo. Se você estiver com erros, confira o projeto até este ponto <a href="https://gist.github.com/JosephLivengood/28ea2cae7e1dc6a53d7f0c42d987313b">aqui</a> .</em></em> </section>
|
||||
|
||||
Reference in New Issue
Block a user