Импорт блокировки Auth0 в компонент React в Meteor 1.3

Я создаю новый проект Meteor 1.3, и у меня возникают проблемы с интеграцией Auth0. Я следую руководству здесь, но чтобы все усложнить, я использую ES2015. модули, а также React, так что я перевожу на ходу.

После запуска meteor add auth0:lock в учебнике говорится, что я должен запустить следующий JS на клиенте:

Template.Auth0Login.events({
  'click button.login'(event, instance) {
    lock.show();
  },
}

Итак, мой файл app/imports/ui/components/Navbar.jsx выглядит так:

1| import React, {Component} from 'react';
2| 
3| export default class Navbar extends Component {
4|   render() {
5|     return (
6|       <button class='signin' onClick={lock.show()}>Sign In</button>
7|      )
8|   }
9| }

Визуализированная страница пуста со следующей ошибкой консоли:

Uncaught TypeError: Cannot read property 'show' of undefined

Если я уберу onClick={lock.show()}, появится кнопка. И в этом есть смысл — как узнать, что такое «замок», не импортировав его? Поэтому я нашел строку импорта в Auth0 руководстве по React и добавил ее в :

1| import React, {Component} from 'react';
2| import Auth0Lock from 'auth0-lock';
3| 
4| export default class Navbar extends Component {
5|   ...

Вызывает следующую ошибку консоли:

Uncaught Error: Cannot find module 'auth0-lock'

Я попытался переименовать импортированный модуль в auth0:lock вместо пакета метеора, но безрезультатно.

Кто-нибудь знает, как импортировать Lock в данный компонент React, чтобы можно было использовать эти функции? Или есть другой способ?

Большое спасибо!


person Teagan Atwater    schedule 11.07.2016    source источник


Ответы (1)


Вы видели это: https://auth0.com/docs/libraries/lock ?

    // Initialize Auth0Lock with your `clientID` and `domain`
    var lock = new Auth0Lock('xxxxxx', '<account>.auth0.com');
person vwrobel    schedule 17.07.2016
comment
Спасибо большое за Ваш ответ! Я в восторге от этого направления, однако, когда я использую импорт ES2015, я получаю новую ошибку: Uncaught ReferenceError: Auth0Lock is not defined, поэтому я подозреваю, что мне нужно найти правильную строку импорта для файла компонента React. Я пробовал import Auth0Lock from 'auth0-lock';, import Auth0Lock from 'auth0:lock' и import Auth0Lock from 'Auth0Lock';, ни один из них не увенчался успехом. Любые идеи? Спасибо еще раз! - person Teagan Atwater; 20.07.2016
comment
Привет Тиган. import Auth0Lock from 'auth0-lock'; отлично работает для меня с импортом ES2015. Какой менеджер пакетов вы используете с метеором? Вы уверены, что Auth0Lock находится в объявленных зависимостях вашего проекта? Поскольку вы используете React, вы также можете взглянуть на auth0-react-lock. - person vwrobel; 21.07.2016
comment
Поскольку я не знаком с Meteor и Atmosphere, я не уверен, что мой вклад будет вам полезен. В вашем проекте есть файл пакетов, например вот этот правильно? - person vwrobel; 21.07.2016
comment
vwrobel, что это работает для вас, вселяет в меня большие надежды! Я добавил Auth0 с meteor add auth0:lock, поэтому я вижу auth0:lock в моем файле .meteor/packages. Может быть, мне стоит попробовать вместо этого использовать npm и добавить его в мой корневой файл package.json? - person Teagan Atwater; 22.07.2016
comment
Да, вы можете попробовать npm. Я использовал npm install auth0-lock --save для своего проекта. - person vwrobel; 22.07.2016
comment
auth0 возможно худший сервис, который я когда-либо использовал - person A.com; 12.04.2021