Как сканировать отпечатки пальцев с помощью Async PHP и React Native

 namespace App\Socket; use Aerys\Request; use Aerys\Response; use Aerys\Websocket; use Aerys\Websocket\Endpoint; use Aerys\Websocket\Message; class FingerprintSocket implements Websocket { private $endpoint; private $connections = []; public function onStart(Endpoint $endpoint) { $this->endpoint = $endpoint; } public function onHandshake(Request $request, Response $response) { // $origin = $request->getHeader("origin"); // // if ($origin !== "http://127.0.0.1:8080") { // $response->setStatus(403); // $response->end("origin not allowed"); // return null; // } $info = $request->getConnectionInfo(); return $info["client_addr"]; } public function onOpen(int $clientId, $address) { $this->connections[$clientId] = $address; } public function onData(int $clientId, Message $message) { $body = yield $message; yield $this->endpoint->send( $payload, $clientId ); } public function onClose(int $clientId, int $code, string $reason) { unset($this->connections[$clientId]); } public function onStop() { // nothing to see here... } } с namespace App\Socket; use Aerys\Request; use Aerys\Response; use Aerys\Websocket; use Aerys\Websocket\Endpoint; use Aerys\Websocket\Message; class FingerprintSocket implements Websocket { private $endpoint; private $connections = []; public function onStart(Endpoint $endpoint) { $this->endpoint = $endpoint; } public function onHandshake(Request $request, Response $response) { // $origin = $request->getHeader("origin"); // // if ($origin !== "http://127.0.0.1:8080") { // $response->setStatus(403); // $response->end("origin not allowed"); // return null; // } $info = $request->getConnectionInfo(); return $info["client_addr"]; } public function onOpen(int $clientId, $address) { $this->connections[$clientId] = $address; } public function onData(int $clientId, Message $message) { $body = yield $message; yield $this->endpoint->send( $payload, $clientId ); } public function onClose(int $clientId, int $code, string $reason) { unset($this->connections[$clientId]); } public function onStop() { // nothing to see here... } } 

Это из app/Socket/FingerprintSocket.pre в проекте сервера

 use Aerys\Router; use App\Action\ScanAction; use App\Socket\FingerprintSocket; return (Router $router) => { $router->route( "GET", "/scan", new ScanAction ); $router->route( "GET", "/ws", Aerys\websocket(new FingerprintSocket) ); }; 

Это из routes/web.pre в проекте сервера

Мы только что зарегистрировали новый маршрут, который будет отвечать на соединения через веб-сокет и возвращать эхо-сообщения. Используя консоль разработчика Chrome, в той же конечной точке /scan мы можем проверить это:

Подключение к React Native

Поскольку мы можем отправлять сообщения обратно через веб-сокет, вероятно, сейчас самое время попробовать подключиться из нашего приложения. React Native поставляется с поддержкой веб-сокетов, поэтому мы можем добавить аналогичный код в тот же метод componentDidMount :

 componentDidMount() { // TouchID.authenticate("Trying TouchID") // .then(success => { // alert("Success") // }) // .catch(error => { // alert("Failure") // }) const socket = new WebSocket("ws://127.0.0.1:8080/ws") socket.addEventListener("message", e => console.log(e.data)) socket.addEventListener("open", e => socket.send("hi")) } 

Это из index.ios.js в проекте приложения

Чтобы увидеть эти сообщения консоли, вам нужно включить удаленную отладку.

Как включить удаленную отладку

Нажмите ⌘ + D и выберите «Debug Remote JS». Откроется новая вкладка Chrome. Откройте панель инструментов разработчика этой новой вкладки, затем обновите приложение. Это должно привести к появлению «hi» в консоли, так как оно отражается от сервера.

Запрашивая отпечатки пальцев

Давайте настроим собственный код React для прослушивания запросов на сканирование отпечатков пальцев:

 componentDidMount() { const socket = new WebSocket("ws://127.0.0.1:8080/ws") socket.addEventListener("message", (e) => { const data = JSON.parse(e.data) if (data.type === "scan") { TouchID.authenticate("Trying TouchID") .then(success => { // alert("Success") socket.send(JSON.stringify({ "type": "success", "data": success, "promise": data.promise })) }) .catch(error => { // alert("Failure") socket.send(JSON.stringify({ "type": "error", "data": error, "promise": data.promise })) }) } }) // socket.addEventListener("open", e => socket.send("hi")) } 

Это из index.ios.js в проекте приложения

Когда приходит сообщение, мы анализируем его в JSON. Если тип scan , мы запрашиваем сканирование отпечатка пальца. Независимо от того, успешно ли выполнено сканирование отпечатка пальца, мы отправляем сериализованный объект JSON с подробной информацией о событии.

Нам также необходимо настроить сервер для работы с этим новым видом сообщений:

 use Aerys\Router; use App\Action\ScanAction; use App\Socket\FingerprintSocket; $socket = new FingerprintSocket; return (Router $router) => { $router->route( "GET", "/scan", new ScanAction($socket) ); $router->route( "GET", "/ws", Aerys\websocket($socket) ); }; 

Это из routes/web.pre в проекте сервера

Мы предоставляем ссылку на класс сокета для класса действия. Это означает, что мы можем вызывать методы класса сокета в ответ на HTTP-запросы:

 namespace App\Action; use Aerys\Request; use Aerys\Response; use App\Socket\FingerprintSocket; class ScanAction { private $socket; public function __construct(FingerprintSocket $socket) { $this->socket = $socket; } public function __invoke(Request $request, Response $response) { try { yield $this->socket->requestScan(); $response->end("success!"); } catch ($e) { $response->end("failure!"); } } } 

Это из app/Action/ScanAction.pre в проекте сервера

Когда вызывается маршрут /scan , мы запрашиваем новое сканирование отпечатков пальцев из класса сокетов. Это отложенное действие (потому что приложение должно запрашивать и ждать сканирования), поэтому мы можем ожидать использование обещаний:

 private $id = 0; private $promises = []; public async function requestScan() { $deferred = new Deferred; $this->promises["_{$this->id}"] = $deferred; $body = json_encode([ "type" => "scan", "promise" => "_{$this->id}" ]); $this->id += 1; $this->endpoint->broadcast($body); return $deferred->promise(); } public function onData(int $clientId, Message $message) { $body = yield $message; $data = json_decode($body); $promise = $this->promises[$data->promise]; if ($data->type === "success") { $promise->resolve($data->data); } else { $promise->fail( new \Exception($data->data->message) ); } unset($this->promises["_{$this->id}"]); // yield $this->endpoint->send( // $body, $clientId // ); } работают private $id = 0; private $promises = []; public async function requestScan() { $deferred = new Deferred; $this->promises["_{$this->id}"] = $deferred; $body = json_encode([ "type" => "scan", "promise" => "_{$this->id}" ]); $this->id += 1; $this->endpoint->broadcast($body); return $deferred->promise(); } public function onData(int $clientId, Message $message) { $body = yield $message; $data = json_decode($body); $promise = $this->promises[$data->promise]; if ($data->type === "success") { $promise->resolve($data->data); } else { $promise->fail( new \Exception($data->data->message) ); } unset($this->promises["_{$this->id}"]); // yield $this->endpoint->send( // $body, $clientId // ); } не private $id = 0; private $promises = []; public async function requestScan() { $deferred = new Deferred; $this->promises["_{$this->id}"] = $deferred; $body = json_encode([ "type" => "scan", "promise" => "_{$this->id}" ]); $this->id += 1; $this->endpoint->broadcast($body); return $deferred->promise(); } public function onData(int $clientId, Message $message) { $body = yield $message; $data = json_decode($body); $promise = $this->promises[$data->promise]; if ($data->type === "success") { $promise->resolve($data->data); } else { $promise->fail( new \Exception($data->data->message) ); } unset($this->promises["_{$this->id}"]); // yield $this->endpoint->send( // $body, $clientId // ); } 

Это из app/Socket/FingerprintSocket.pre в проекте сервера

Метод requestScan является асинхронным. Он возвращает отложенный объект (который действует как обещание с методами resolve и fail ). Мы храним ссылку на отложенный объект и передаем его идентификатор (и запрос на сканирование) всем подключенным клиентам веб-сокетов.

Мы возвращаем отложенную ссылку, так что действие будет ждать, пока оно не будет разрешено (благодаря ключевому слову yield ). Затем мы слушаем сообщения об success или fail из приложения. Мы находим связанный отложенный объект и разрешаем или ошибаемся соответствующим образом.

На этом этапе оператор yield действия разрешается, и мы можем ответить, успешно или нет. Вот как это все выглядит вместе:

Резюме

Учитывая, как мало JavaScript нам нужно было написать и насколько круто взаимодействие между iOS и асинхронным PHP-сервером, я думаю, что это был огромный успех. Мы создали способ запрашивать сканирование отпечатков пальцев с помощью простого HTTP GET-запроса. Это само по себе огромно, но теперь подумайте, как мы могли бы интегрировать это на этапе авторизации кредитной карты!

Более подробно об этом в дальнейшем — до этого, пожалуйста, дайте нам знать, что вы думаете в разделе комментариев ниже!