如何在 Blazor 客户端中正确获取 facebook 登录令牌？

Question

应用是Blazor客户端，尝试实现facebook身份验证。

按照 facebook 指南，我有以下代码：

JS部分：

window.fbAsyncInit = function () {
    FB.init({
        appId: '...',
        autoLogAppEvents: true,
        xfbml: true,
        version: 'v7.0'
    });

    // To don't call the FB.login directly
    function login() {
        FB.login(function (response) {
            if (response.authResponse) {
                console.log('Welcome!  Fetching your information.... ');
                var accessToken = response.authResponse.accessToken;
                console.log(accessToken.getToken());
                //location.href = "REDIRECT_TO.php";
                //await callbackMethod.invokeMethodAsync('Callback', accessToken);
            }
            else {
                console.log('User cancelled login or did not fully authorize.');
                //await callbackMethod.invokeMethodAsync('Callback', 'xx');
            }
        });

        FB.getLoginStatus(function (response) {
            if (response.status === 'connected') {
                var accessToken = response.authResponse.accessToken;
                return accessToken;
            }
        });
    }
};

C# 部分：

public async Task FBLogin()
{
    var reference = DotNetObjectReference.Create(this);
    await jsRuntime.InvokeVoidAsync("FB.login", reference);
}

[JSInvokable("Callback")]
public void Callback(object token)
{
    // things to do..
}

问题一。可以直接从 js 同步检索任何值到 C# 吗？（只有异步访问js）

问题二。使用回调函数是检索令牌的正确方法吗？在哪里放置 "callbackMethod" 作为参数？（我不是 js 专家，我尝试了所有方法并且 none 有效）。

在没有通过参考的情况下，登录工作正常。当我通过时显示以下错误消息：

Answer 1

首先在你的blazor webassembly项目中的“wwwroot/js/”中创建一个javascript文件，并将其命名为“fbInit.js”，将这段代码放入文件中：

window.fbAsyncInit = function () {
    window.FB.init({
        appId: 'your-fb-app-id',
        cookie: true,
        xfbml: true,
        version: 'v7.0'
    });

    window.FB.AppEvents.logPageView();
};

(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) { return; }
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

现在在“wwwroot/js”中创建另一个 javascript 文件并将其命名为“fbLogin.js”，将此代码放入文件中：

window.fbLogin = function() {   
    window.FB.login(function (response)
    {
        if (response.status === 'connected') {
            //console.log(response)            
        } else {
            console.log("No se logeo");
        }

        DotNet.invokeMethodAsync('WebClient-Blazor', 'FbLoginProcessCallback', response);
        
    }, { scope: 'public_profile, email' });       
}

现在你需要在你的 webassembly 项目的“wwwroot/index.html”文件中声明这些脚本的存在，这样做：

<script src="_framework/blazor.webassembly.js"></script>
<!--put it below blazor.webassembly.js declaration -->
<script src="js/fbInit.js"></script>
<script src="js/fbLogin.js"></script>

现在在您的“shared/MainLayout.razor”文件中，插入此代码：

protected override async Task OnInitializedAsync()
{
    base.OnInitialized();

    await JSRuntime.InvokeVoidAsync("fbAsyncInit");
}

记得在启动 razor 文件的代码部分之前注入 IJSRuntime 接口，只需将此依赖项注入插入：

@inject IJSRuntime jsRuntime

@code
{
//all your razor code 
}

最后，在您的登录组件或页面中，您的按钮将执行 Facebook 登录，创建此异步方法并从自定义 facebook 按钮的 @onclick 方法调用它：

public async Task FbLoginProcess()
{
   await JSRuntime.InvokeAsync<object("fbLogin");
}

如果您想从 javascript 代码中回调您的 c# 代码并传递 facebook 登录结果，请添加此其他方法。

[JSInvokable("FbLoginProcessCallback")]
public static void FbLoginProcessCallback(object result)
{
    Console.WriteLine(result);
}

javascript 函数“fbLogin”将 return Facebook Response 对象到您的 C#“FbLoginProcessCallback”函数，您可以随意使用它，也许可以创建一个 httpclient post 请求您自己的 API 或使用 Blazor NavigationManager 重定向到另一个页面或仅将其保存在您的本地存储对象中。

希望这个回答对您有所帮助。

有关 JSInterop 的更多信息，click here!

Answer 2

我不是所有者，但发现了在 jwt 令牌上完全使用 Twitter、Facebook（Google 目前不工作）webassembly 的很好的例子

https://github.com/CuriousDrive/BlazingChat

如何在 Blazor 客户端中正确获取 facebook 登录令牌？

How to get facebook login token in Blazor Client properly?

javascript

callback

facebook-javascript-sdk

blazor-client-side