oauth2.0 用户如何授予我的网站管理其Amazon Alexa列表的权限

ukqbszuj  于 2023-04-19  发布在  其他
关注(0)|答案(2)|浏览(178)

bounty已结束。回答此问题有资格获得+300声望赏金。赏金宽限期将在10小时后结束。Ryan正在寻找来自信誉良好的来源的答案

我希望我的Next.js TypeScript应用程序的用户授予它管理Alexa列表的权限。
我认为这可能与OAuth2有关。
我想我需要在我的网站中创建一个按钮,将用户带到Amazon URL,允许用户授予我的网站权限来管理他们的Alexa列表(然后生成一个代码,它包含在GET请求中,作为重定向到“回调”URL,我在Amazon中设置OAuth2时注册为redirect_uri)。
我想这个按钮应该是一个指向URL的链接,定义如下

const url = `${oauth2BaseUrl}?client_id=${encodeURIComponent(clientId)}&redirect_uri=${encodeURIComponent(redirectUrl)}&response_type=code&scope=${scope}`;

根据我的经验,这通常是OAuth2的工作方式。
但是我发现Amazon's docs非常没用。
我看到这里提到的权限/范围称为alexa::household:lists:read alexa::household:lists:write
我已经设置了API端点(我将在redirectUrl处指定),以按照此处显示的代码示例将Amazon授权代码交换为Amazon访问令牌。
我将oauth2 BaseUrl设置为'https://www.amazon.com/ap/oa'(在https://developer.amazon.com/docs/login-with-amazon/authorization-code-grant.html上找到)。
对于客户端ID,我使用我创建的Alexa技能的ID。对吗?
我正在使用Next-auth,但我很好奇是否有其他库可以使这一切变得更容易。
以下是我在技能中添加的权限:

我总是得到:

400 Bad Request
An unknown scope was requested

但是如果我只是使用这些不同的作用域,我看到它的行为是我所期望的(但我没有List权限):alexa::skills:account_linking postal_code profile:user_id
我也开始设置登录与亚马逊,但我不明白为什么这将是必要的。我不希望提供一个联合登录功能。

jum4pzuy

jum4pzuy1#

我从另一个线程收到了你的ping。我没有使用应用到应用的帐户链接,所以我没有一个完整的答案给你。但据我所知,alexa::household:lists:readalexa::household:lists:write是技能权限(不是OAuth范围)。如果启用,Alexa应用程序将在OAuth身份验证流程后***提示用户同意。
例如,以下是Android上Alexa应用的基本帐户链接流程(不是应用到应用帐户链接):
1.打开Alexa应用
1.选择我的技能〉启用

  1. Alexa应用程序在Chrome中打开登录亚马逊页面(我使用LWA作为我的OAuth提供商)
    1.我登录并授权请求
    1.它返回到Alexa应用程序,并显示消息“您的技能帐户已成功链接”〉单击关闭
    1.然后Alexa应用程序会提示输入帐户权限。这是我可以授予技能访问Alexa列表的步骤
    因此,授予Alexa列表权限不是基本帐户链接流中OAuth的一部分。
    作为一个实验,我尝试在我的技能的帐户链接配置中添加alexa::household:lists:read作为范围,它打破了帐户链接- Alexa应用程序将显示错误消息,而不是打开LWA页面。所以我不认为它们是OAuth范围。这也可以解释为什么你会得到400 Bad Request -- An unknown scope was requested错误。
    至于您的场景,您是希望通过Alexa应用流程还是LWA回退流程实现应用到应用帐户链接?如果是后者,根据我上面的观察,我怀疑这可能不是受支持的用例。我建议联系Amazon developer support进行确认。
brccelvz

brccelvz2#

1.前往Amazon Developer Console。
1.点击右上角菜单中的“登录亚马逊”。
1.单击“创建新的安全配置文件”。
1.填写所需信息并单击“保存”。在新安全配置文件的“Web设置”选项卡中,将您的redirectUrl添加到“允许的返回URL”。
1.请注意“General”选项卡中提供的“Client ID”和“Client Secret”。在OAuth2请求中使用此新的Client ID。
并更新您的OAuth2请求URL,以包含正确的客户端ID和Alexa列表的请求范围

const oauth2BaseUrl = 'https://www.amazon.com/ap/oa';
const clientId = 'YOUR_LOGIN_WITH_AMAZON_CLIENT_ID';
const redirectUrl = 'YOUR_REDIRECT_URL';
const scope = 'alexa::household:lists:read alexa::household:lists:write';

const url = `${oauth2BaseUrl}?client_id=${encodeURIComponent(clientId)}&redirect_uri=${encodeURIComponent(redirectUrl)}&response_type=code&scope=${encodeURIComponent(scope)}`;

Next-auth不直接支持Alexa Lists API。Next-auth是Next.js的身份验证库,可以简化向应用添加身份验证的过程。虽然它支持使用Amazon登录,但它不提供对Alexa Lists API的内置支持。
您可以在Next-auth中使用Amazon提供程序登录Amazon,但您仍然需要自己处理Alexa Lists API调用。

APP:

在Next.js应用中创建一个组件,以生成OAuth URL并呈现按钮:

// components/LinkWithAmazon.tsx

import React from 'react';

const oauth2BaseUrl = 'https://www.amazon.com/ap/oa';
const clientId = process.env.CLIENT_ID;
const redirectUrl = process.env.REDIRECT_URL;
const scope = 'alexa::household:lists:read alexa::household:lists:write';

const url = `${oauth2BaseUrl}?client_id=${encodeURIComponent(clientId)}&redirect_uri=${encodeURIComponent(redirectUrl)}&response_type=code&scope=${encodeURIComponent(scope)}`;

const LinkWithAmazon: React.FC = () => (
  <a href={url}>Link with Amazon Alexa</a>
);

export default LinkWithAmazon;

实现一个Next.js API路由来处理来自Amazon的回调,并将授权代码交换为访问令牌:

// pages/api/auth/callback.ts

import type { NextApiRequest, NextApiResponse } from 'next';
import axios from 'axios';

async function handler(req: NextApiRequest, res: NextApiResponse) {
  const { code } = req.query;

  const response = await axios.post('https://api.amazon.com/auth/o2/token', null, {
    params: {
      grant_type: 'authorization_code',
      code,
      client_id: process.env.CLIENT_ID,
      client_secret: process.env.CLIENT_SECRET,
      redirect_uri: process.env.REDIRECT_URL,
    },
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  });

  const { access_token: accessToken, refresh_token: refreshToken } = response.data;

  // Save the access token and refresh token to your database or session

  // Redirect the user back to your app
  res.redirect('/');
}

export default handler;
···

Use the ·LinkWithAmazon· component in your app to render the button and call the getShoppingList function when needed:
jsx

相关问题