Проблема: користувач вручну вводить 5000 контактів, CRM порожня
Типова ситуація: HR-портали, платформи нетворкінгу та CRM-системи вимагають від користувача завантажити контакти. Ручне введення 5000+ записів займає години, а 70% користувачів покидають сайт, якщо бачать довгу форму. Помилки неминучі, дублікати плодяться. Уявіть: клієнт витрачає 3 години на заповнення форми, а потім виявляє, що половина контактів уже є. Імпорт з Google Contacts або Outlook вирішує цей біль. Але реалізація потребує акуратної роботи з OAuth, пагінацією та різними API. Ми реалізуємо імпорт під ключ: користувач авторизується, вибирає потрібні контакти та імпортує їх за два кліки. В результаті база заповнюється за хвилини, а конверсія реєстрацій зростає на 30%. Зв'яжіться з нами — отримайте консультацію за вашим проектом.
Які технічні складності ми вирішуємо?
Різні протоколи авторизації
Google використовує OAuth 2.0 з Google Identity Platform, Microsoft — OAuth 2.0 з Azure AD. У кожного свої endpoint'и, скоупи та процедура отримання токена. Помилка в налаштуванні redirect URI — і користувач бачить порожній екран. Завдяки Laravel Socialite, розробка OAuth прискорюється в 2 рази порівняно з написанням коду вручну.
Пагінація з тисячами записів. У користувача може бути 5000+ контактів, а API повертає максимум 1000 за запит. Потрібно правильно обробляти nextPageToken / @odata.nextLink. Без пагінації імпорт обривається на першому блоці.
Оновлення токенів. Access token живе 1 годину (Google) або 90 хвилин (Outlook). Refresh token дозволяє отримати новий — його необхідно зберігати в БД зашифрованим і оновлювати за розкладом. Якщо цього не зробити, імпорт зламається через годину.
UI вибору та чуйність. Список з 5000 контактів не повинен гальмувати інтерфейс. Використовуємо віртуалізацію або посторінкове підвантаження. Інакше браузер зависає на 10 секунд. Frontend з віртуалізацією працює в 3 рази швидше за звичайний рендер тисяч контактів.
Чому варто вибрати Laravel для інтеграції?
Laravel 11 надає вбудовану підтримку OAuth через Socialite, готове шифрування та черги для фонових завдань. На одному з проектів (HR-портал) ми інтегрували імпорт контактів з Google та Outlook за допомогою офіційних SDK — google/apiclient та microsoft/microsoft-graph. Обидва SDK підтримують refresh. Нижче — ключові фрагменти. Для імпорту контактів Google використовується Google People API, а для імпорту контактів Outlook — Microsoft Graph API.
Google People API: налаштування OAuth
У Google Cloud Console: створити проект → увімкнути «People API» → створити OAuth 2.0 Client ID (тип: Web application) → додати redirect URI.
Потрібні скоупи:
-
https://www.googleapis.com/auth/contacts.readonly— читання контактів -
https://www.googleapis.com/auth/contacts.other.readonly— контакти з «Інші контакти»
use Google\Client as GoogleClient;
class GoogleContactsService
{
private GoogleClient $client;
public function __construct()
{
$this->client = new GoogleClient();
$this->client->setClientId(config('services.google.client_id'));
$this->client->setClientSecret(config('services.google.client_secret'));
$this->client->setRedirectUri(config('services.google.redirect'));
$this->client->addScope('https://www.googleapis.com/auth/contacts.readonly');
$this->client->setAccessType('offline'); // отримуємо refresh_token
}
public function getAuthUrl(): string
{
return $this->client->createAuthUrl();
}
public function handleCallback(string $code): array
{
$token = $this->client->fetchAccessTokenWithAuthCode($code);
// Зберігаємо токен для користувача
return $token;
}
}
Отримання контактів з Google People API
public function getContacts(array $accessToken): array
{
$this->client->setAccessToken($accessToken);
if ($this->client->isAccessTokenExpired() && isset($accessToken['refresh_token'])) {
$this->client->fetchAccessTokenWithRefreshToken($accessToken['refresh_token']);
}
$service = new \Google\Service\PeopleService($this->client);
$contacts = [];
$pageToken = null;
do {
$params = [
'personFields' => 'names,emailAddresses,phoneNumbers',
'pageSize' => 1000,
];
if ($pageToken) {
$params['pageToken'] = $pageToken;
}
$result = $service->people_connections->listPeopleConnections('people/me', $params);
foreach ($result->getConnections() ?? [] as $person) {
$name = $person->getNames()[0] ?? null;
$email = $person->getEmailAddresses()[0] ?? null;
$phone = $person->getPhoneNumbers()[0] ?? null;
if (!$email) continue; // пропускаємо без email
$contacts[] = [
'name' => $name?->getDisplayName() ?? '',
'email' => $email->getValue(),
'phone' => $phone?->getValue() ?? '',
];
}
$pageToken = $result->getNextPageToken();
} while ($pageToken);
return $contacts;
}
Пагінація обов'язкова: у користувача може бути 5000+ контактів, API повертає максимум 1000 за запит.
Microsoft Graph API: Outlook/Office 365 контакти
Реєстрація застосунку в Azure AD → «App registrations» → «New registration». Потрібні дозволи: Contacts.Read (Delegated).
use Microsoft\Graph\Graph;
use Microsoft\Graph\Model\Contact;
class OutlookContactsService
{
public function getAuthUrl(): string
{
$params = http_build_query([
'client_id' => config('services.microsoft.client_id'),
'response_type' => 'code',
'redirect_uri' => config('services.microsoft.redirect'),
'scope' => 'offline_access Contacts.Read',
'response_mode' => 'query',
]);
return "https://login.microsoftonline.com/common/oauth2/v2.0/authorize?{$params}";
}
public function getToken(string $code): array
{
$response = Http::asForm()->post(
'https://login.microsoftonline.com/common/oauth2/v2.0/token',
[
'client_id' => config('services.microsoft.client_id'),
'client_secret' => config('services.microsoft.client_secret'),
'code' => $code,
'redirect_uri' => config('services.microsoft.redirect'),
'grant_type' => 'authorization_code',
]
);
return $response->json();
}
public function getContacts(string $accessToken): array
{
$graph = new Graph();
$graph->setAccessToken($accessToken);
$contacts = [];
$url = '/me/contacts?$select=displayName,emailAddresses,mobilePhone&$top=100';
do {
$result = $graph->createRequest('GET', $url)->execute();
$data = $result->getBody();
foreach ($data['value'] as $contact) {
$email = $contact['emailAddresses'][0]['address'] ?? null;
if (!$email) continue;
$contacts[] = [
'name' => $contact['displayName'] ?? '',
'email' => $email,
'phone' => $contact['mobilePhone'] ?? '',
];
}
$url = $data['@odata.nextLink'] ?? null;
// Прибираємо базовий URL для Graph SDK
if ($url) {
$url = str_replace('https://graph.microsoft.com/v1.0', '', $url);
}
} while ($url);
return $contacts;
}
}
UI: вибір контактів для імпорту
Після отримання списку користувач вибирає, які контакти імпортувати:
function ContactImportModal({ contacts, onImport }) {
const [selected, setSelected] = useState(new Set());
const toggle = (email) => {
setSelected(prev => {
const next = new Set(prev);
next.has(email) ? next.delete(email) : next.add(email);
return next;
});
};
return (
<div>
<div className="actions">
<button onClick={() => setSelected(new Set(contacts.map(c => c.email)))}>
Вибрати всі ({contacts.length})
</button>
</div>
<ul>
{contacts.map(contact => (
<li key={contact.email}>
<label>
<input
type="checkbox"
checked={selected.has(contact.email)}
onChange={() => toggle(contact.email)}
/>
{contact.name} — {contact.email}
</label>
</li>
))}
</ul>
<button onClick={() => onImport([...selected])}>
Імпортувати вибраних ({selected.size})
</button>
</div>
);
}
Зберігання токенів
Токени доступу не можна зберігати в сесії — вони повинні бути в БД, зашифровані:
// Міграція
$table->text('google_access_token')->nullable();
$table->text('google_refresh_token')->nullable();
$table->timestamp('google_token_expires_at')->nullable();
// В моделі User — автоматичне шифрування
protected $casts = [
'google_access_token' => 'encrypted',
'google_refresh_token' => 'encrypted',
];
Як користувач імпортує контакти: крок за кроком
- Користувач натискає «Імпортувати контакти» на сайті.
- Вибирає провайдера (Google або Outlook).
- Система перенаправляє на OAuth-сторінку провайдера.
- Користувач дає дозвіл на читання контактів.
- Зворотний виклик зберігає токени в БД.
- Фронтенд завантажує список контактів (з пагінацією).
- Користувач позначає потрібні контакти та натискає «Імпортувати».
- Вибрані контакти зберігаються в CRM/базу сайту.
Приклад налаштування Google OAuth
У Google Cloud Console створіть проект, увімкніть People API, налаштуйте OAuth consent screen. Потім створіть облікові дані OAuth 2.0 Web application, вказавши redirect URI на ваш сервер. Використовуйте отримані client ID та secret у конфігурації Laravel. Згідно документації Google People API, рекомендовано використовувати access_type=offline.Що входить у роботу
| Етап | Що робимо | Результат |
|---|---|---|
| Аналітика | Узгоджуємо список провайдерів, скоупи, дизайн UI | Технічне завдання |
| Проєктування | Розробляємо схему OAuth, зберігання токенів, обробку помилок | Архітектурна документація |
| Реалізація | Пишемо сервіси для Google та Outlook, фронтенд-компонент | Працюючий імпорт |
| Тестування | Перевіряємо пагінацію, оновлення токенів, крайові випадки | Звіт про тестування |
| Деплой | Розгортаємо на production, налаштовуємо моніторинг | Доступи, інструкція |
Порівняння складності Google People API та Microsoft Graph API
| Параметр | Google People API | Microsoft Graph API |
|---|---|---|
| Реєстрація застосунку | Google Cloud Console | Azure AD App Registrations |
| Максимум контактів за запит | 1000 (pageSize) | 1000 ($top) |
| Пагінація | nextPageToken | @odata.nextLink |
| Refresh токен | За замовчуванням (access_type=offline) | Потрібно запитати offline_access |
| SDK | google/apiclient | microsoft/microsoft-graph |
| Складність інтеграції | Середня (один токен, скоупи зрозумілі) | Вища (Azure AD, більше налаштувань) |
Google простіший для старту — інтеграція займає в 1.5 рази менше часу. Але Outlook — стандарт у корпоративному секторі. Ми підключаємо обидва.
Чому варто довірити інтеграцію нам
У команди 10+ років досвіду у веб-розробці та понад 50 проектів з інтеграціями зовнішніх API. Ми сертифіковані як Google Cloud Partner та маємо досвід роботи з Azure AD. Використовуємо безпечні практики зберігання токенів, застосовуємо шифрування та регулярно тестуємо оновлення токенів. Ми надаємо гарантію на роботу 30 днів. Автоматизація імпорту контактів економить до 200 000 гривень на рік на ручному введенні. Базовий пакет (один провайдер) — від 5000 грн, обидва — від 8000 грн (знижка 10% при замовленні комплекту). Після імпорту контактів можлива періодична синхронізація контактів на сайт. Реалізація імпорту контактів з Outlook в базу даних сайту займає 2-3 дні. Таким чином реалізується інтеграція CRM з Google та Outlook. Зв'яжіться з нами для оцінки вашого проекту — ми підберемо оптимальне рішення та назвемо точні терміни.
Терміни орієнтовно
- Один провайдер (Google або Outlook) — від 2 до 3 робочих днів.
- Обидва провайдери з підтримкою синхронізації — від 4 до 5 робочих днів.
Вартість розраховується індивідуально після аналізу ваших вимог. Замовте консультацію — ми надішлемо комерційну пропозицію протягом одного робочого дня.







