جدیدترین به‌روزرسانی‌های میانای برنامه‌سازی کاربردی مدیریت اطلاعات کاربری

Eiji Kitamura

برخی‌از به‌روزرسانی‌های شرح‌داده‌شده در اینجا در جلسه Google I/O توضیح داده شده‌اند، ورود به سیستم ایمن و یکپارچه: حفظ تعامل کاربران:

Chrome 57

Chrome 57 این تغییر مهم را در Credential Management API معرفی کرد.

اعتبارنامه‌ها را می‌توان از زیردامنه دیگری هم‌رسانی کرد

اکنون Chrome می‌تواند بااستفاده از Credential Management API، اعتبارنامه ذخیره‌شده در زیردامنه دیگری را بازیابی کند. برای مثال، اگر گذرواژه‌ای در login.example.com ذخیره شده باشد، یک اسکریپت در www.example.com می‌تواند آن را به‌عنوان یکی از موارد حساب در کادر گفتگوی انتخابگر حساب نشان دهد.

باید گذرواژه را به‌طور صریح بااستفاده از navigator.credentials.store() ذخیره کنید، تا وقتی کاربر با تک‌ضرب زدن روی کادر گفتگو اطلاعات اعتباری را انتخاب می‌کند، گذرواژه منتقل شود و در مبدأ فعلی کپی شود.

پس‌از ذخیره شدن، گذرواژه به‌عنوان اعتبارنامه در همان مبدأ دقیق www.example.com به بعد دردسترس است.

در نماگرفت زیر، اطلاعات اعتبارنامه ذخیره‌شده در login.aliexpress.com برای m.aliexpress.com قابل‌مشاهده است و کاربر می‌تواند از بین آن‌ها انتخاب کند:

Chrome 60

‫Chrome 60 چندین تغییر مهم در Credential Management API ایجاد می‌کند:

• شیء PasswordCredential اکنون حاوی گذرواژه است.

• ازآنجایی‌که دیگر برای واکشی گذرواژه به تابع سفارشی fetch() نیازی نیست، به‌زودی منسوخ خواهد شد.

• اکنون به‌جای پرچم بولی unmediated، navigator.credentials.get()یک enum mediation را می‌پذیرد.

• نام requireUserMediation() به preventSilentAccess() تغییر کرد.

• روش جدید navigator.credentials.create() به‌صورت ناهمگام اشیاء اطلاعات کاربری را ایجاد می‌کند.

تشخیص ویژگی به بررسی نیاز دارد

برای اینکه ببینید Credential Management API برای دسترسی به اطلاعات کاربری فدراسیونی و مبتنی بر گذرواژه دردسترس است یا نه، بررسی کنید window.PasswordCredential یا window.FederatedCredential دردسترس است یا نه.

if (window.PasswordCredential || window.FederatedCredential) {
  // The Credential Management API is available
}

شیء PasswordCredential اکنون شامل گذرواژه است

‫Credential Management API رویکردی محافظه‌کارانه برای مدیریت گذرواژه‌ها اتخاذ کرد. این روش گذرواژه‌ها را از جاوا اسکریپت پنهان می‌کرد و توسعه‌دهندگان را ملزم می‌کرد شیء PasswordCredential را مستقیماً به سرور خود ارسال کنند تا ازطریق افزونه‌ای برای fetch() API اعتبارسنجی شود.

اما این رویکرد محدودیت‌هایی را به‌همراه داشت. بازخوردی دریافت کردیم مبنی بر اینکه توسعه‌دهندگان نمی‌توانند از این API استفاده کنند چون:

• آن‌ها باید گذرواژه را به‌عنوان بخشی از شیء JSON ارسال می‌کردند.

• آن‌ها باید مقدار درهم‌سازی گذرواژه را به سرورشان ارسال می‌کردند.

پس‌از انجام تجزیه‌وتحلیل امنیتی و تشخیص اینکه پنهان کردن گذرواژه‌ها از جاوا اسکریپت از همه بردارهای حمله به‌اندازه‌ای که امیدوار بودیم جلوگیری نمی‌کند، تصمیم گرفتیم تغییری ایجاد کنیم.

Credential Management API اکنون شامل گذرواژه خام در شیء اعتبارنامه برگردانده‌شده است تا بتوانید به آن به‌صورت نوشتار ساده دسترسی داشته باشید. می‌توانید از روش‌های موجود برای ارسال اطلاعات اعتبارنامه به سرورتان استفاده کنید:

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    mediation: 'silent'
}).the>n(passwordCred = {
    if (passwordCred) {
    let form = new FormData();
    form.append('email', passwordCred.id);
    form.append('password', passwordCred.password);
    form.append('csrf_token', csrf_token);
    return fetch('/signin', {
        method: 'POST',
        credentials: 'include',
        body: form
    });
 >   } else {

    // Fallback to sign-in form
    }
}).then(res = {
    if (res.status === 200) {
    return res.json(>);
    } else {
    throw 'Auth failed';
    }
}).then(profile = {
    console.log('Auth succeeded', profile);
});

واکشی سفارشی به‌زودی منسوخ می‌شود

برای تعیین اینکه آیا از تابع fetch() سفارشی استفاده می‌کنید، بررسی کنید که آیا از شیء PasswordCredential یا شیء FederatedCredential به‌عنوان مقدار ویژگی credentials استفاده می‌کند، برای مثال:

fetch('/signin', {
    method: 'POST',
    credentials: c
})

استفاده از تابع معمولی fetch() همان‌طور که در نمونه کد قبلی نشان داده شده است، یا استفاده از XMLHttpRequest توصیه می‌شود.

‫navigator.credentials.get() اکنون میانجی‌گری enum را می‌پذیرد

تا Chrome 60، navigator.credentials.get() ویژگی اختیاری unmediated را با پرچم بولی می‌پذیرفت. برای مثال:

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    unmediated: true
}).>then(c = {

    // Sign-in
});

تنظیم unmediated: true از نمایش انتخاب‌گر حساب توسط مرورگر هنگام ارسال اطلاعات اعتباری جلوگیری می‌کند.

پرچم اکنون به‌عنوان میانجی‌گری گسترش یافته است. میانجی‌گری کاربر ممکن است زمانی اتفاق بیفتد که:

• کاربر باید حسابی را برای ورود به سیستم انتخاب کند.

• کاربر می‌خواهد پس‌از فراخوانی navigator.credentials.requireUseMediation()، به‌طور صریح به سیستم وارد شود.

یکی از گزینه‌های زیر را برای مقدار mediation انتخاب کنید:

در این مثال، اعتبارنامه بدون نمایش انتخابگر حساب ارسال می‌شود، که معادل پرچم قبلی، unmediated: true است:

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    mediation: 'silent&>#39;
}).then(c = {

    // Sign-in
});

نام requireUserMediation() به preventSilentAccess() تغییر کرد

برای هم‌راستایی مناسب با ویژگی جدید mediation ارائه‌شده در فراخوانی get()، نام روش navigator.credentials.requireUserMediation() به navigator.credentials.preventSilentAccess() تغییر کرده است.

روش تغییرنام‌یافته از ارسال اطلاعات اعتباری بدون نمایش انتخاب‌کننده حساب جلوگیری می‌کند (گاهی‌اوقات به آن «بدون میانجی‌گری کاربر» می‌گویند). این ویژگی زمانی مفید است که کاربر از سیستم وب‌سایتی خارج می‌شود یا ثبت‌نامش را در وب‌سایتی لغو می‌کند و نمی‌خواهد در بازدید بعدی به‌طور خودکار دوباره به سیستم آن وب‌سایت وارد شود.

signoutUser();
if (navigator.credentials) {
    navigator.credentials.preventSilentAccess();
}

ایجاد کردن اشیای اعتبارنامه به‌صورت ناهمگام با روش جدید navigator.credentials.create()

اکنون می‌توانید با روش جدید navigator.credentials.create()، اشیای اطلاعات کاربری را به‌صورت ناهمگام ایجاد کنید. برای مقایسه بین رویکردهای همگام و ناهمگام، ادامه مطلب را بخوانید.

درحال ایجاد شیء PasswordCredential

رویکرد همگام‌سازی

let c = new PasswordCredential(form);

رویکرد غیرهمگام (جدید)

let c = await navigator.credentials.create({
    password: form
});

یا:

let c = await navigator.credentials.create({
    password: {
    id: id,
    password: password
    }
});

درحال ایجاد شیء FederatedCredential

رویکرد همگام‌سازی

let c = new FederatedCredential({
    id:       'agektmr',
    name:     'Eiji Kitamura',
    provider: 'https://accounts.google.com',
    iconURL:  'https://*****'
});

رویکرد غیرهمگام (جدید)

let c = await navigator.credentials.create({
    federated: {
    id:       'agektmr',
    name:     'Eiji Kitamura',
    provider: 'https://accounts.google.com',
    iconURL:  'https://*****'
    }
});

راهنمای انتقال

آیا Credential Management API را ازقبل پیاده‌سازی کرده‌اید؟ سند راهنمای انتقال داریم که می‌توانید برای ارتقا به نسخه جدید دنبال کنید.